jQuery EasyUI フォームプラグイン -Datebox 日付ボックス

jQuery EasyUI 插件jQuery EasyUI プラグイン

$.fn.combo.defaults から拡張されています。$.fn.datebox.defaults でデフォルトの defaults を上書きします。

日付ボックス（datebox）は、編集可能なテキストボックスとドロップダウンカレンダーパネルを組み合わせたものです。ユーザーはドロップダウンカレンダーパネルから日付を選択できます。テキストボックスに入力された文字列は有効な日付に変換できます。選択された日付も希望の形式に変換できます。

依存関係

  • combo
  • calendar

使用法

マークアップから日付ボックス（datebox）を作成します。

<input id="dd" type="text" class="easyui-datebox" required="required">

JavaScript を使用して日付ボックス（datebox）を作成します。

<input id="dd" type="text">

$('#dd').datebox({
    required:true
});

プロパティ

このプロパティはコンボ（combo）から拡張されています。以下は日付ボックス（datebox）に追加されたプロパティです。

名前 タイプ 説明 デフォルト値
panelWidth number ドロップダウンカレンダーパネルの幅。 180
panelHeight number ドロップダウンカレンダーパネルの高さ。 auto
currentText string 現在の日付ボタンに表示されるテキスト。 Today
closeText string 閉じるボタンに表示されるテキスト。 Close
okText string OKボタンに表示されるテキスト。 Ok
disabled boolean true に設定すると、このフィールドが無効になります。 false
buttons array カレンダーの下のボタン。このプロパティはバージョン 1.3.5 以降使用できます。
コード例：
var buttons = $.extend([], $.fn.datebox.defaults.buttons);
buttons.splice(1, 0, {
    text: 'MyBtn',
    handler: function(target){
        alert('click MyBtn');
    }
});
$('#dd').datebox({
    buttons: buttons
});
sharedCalendar string,selector 複数の日付ボックス（datebox）コンポーネントで使用される共有カレンダー。このプロパティはバージョン 1.3.5 以降使用できます。
コード例：
<input class="easyui-datebox" sharedCalendar="#sc">
<input class="easyui-datebox" sharedCalendar="#sc">
<div id="sc" class="easyui-calendar"></div>
null
formatter function 日付をフォーマットする関数。この関数は 'date' パラメータを受け取り、文字列値を返します。次の例は、デフォルトのフォーマッタ（formatter）関数を上書きする方法を示しています。
$.fn.datebox.defaults.formatter = function(date){
    var y = date.getFullYear();
    var m = date.getMonth()+1;
    var d = date.getDate();
    return m+'/'+d+'/'+y;
}
parser function 日付文字列を解析する関数。この関数は 'date' 文字列を受け取り、日付値を返します。次の例は、デフォルトのパーサー（parser）関数を上書きする方法を示しています。
$.fn.datebox.defaults.parser = function(s){
    var t = Date.parse(s);
    if (!isNaN(t)){
        return new Date(t);
    } else {
        return new Date();
    }
}

イベント

名前 パラメータ 説明
onSelect date ユーザーが日付を選択したときにトリガーされます。
コード例：
$('#dd').datebox({
    onSelect: function(date){
        alert(date.getFullYear()+":"+(date.getMonth()+1)+":"+date.getDate());
    }
});

メソッド

このメソッドはコンボ（combo）から拡張されています。以下は日付ボックス（datebox）用にオーバーライドされたメソッドです。

名前 パラメータ 説明
options none オプション（options）オブジェクトを返します。
calendar none カレンダー（calendar）オブジェクトを取得します。次の例は、カレンダー（calendar）オブジェクトを取得して再描画する方法を示しています。
// get the calendar object
var c = $('#dd').datebox('calendar');
// set the first day of week to monday
c.calendar({
    firstDay: 1
});
setValue value 日付ボックス（datebox）の値を設定します。
コード例：
$('#dd').datebox('setValue', '6/1/2012');    // set datebox value
var v = $('#dd').datebox('getValue');    // get datebox value
jQuery EasyUI 插件jQuery EasyUI プラグイン その他の拡張