nablarch.ui.DatePicker Class
日付入力機能
日付入力機能は日付文字列を入力するための入力補助UI部品である。 日付入力機能は、以下の3つの要素から構成される。
- 入力フィールド
- カレンダーの開閉を行う要素
- カレンダー
カレンダーの開閉 カレンダーの開閉を行う要素は、明示的な要素(ボタン)として配置してもよいが、 ボタンを省略して、入力フィールド単独で開閉を行わせることも可能である。 開かれたカレンダーは、カレンダー上の日付を選択するかカレンダーの外側のどこかを クリックすると閉じる。 カレンダーでの値の変更があった場合は、入力フィールドのchangeイベントのみが発火する。 ただし、入力フィールドで変更する際に通常発生するfocus, blurイベントなどは発生しない。
マークアップ仕様
カレンダーの開閉を行う要素にマーカーCSSクラス nablarch_DatePicker を指定する。 また、入力対象のフィールドのid属性を -input オプションに指定する。
<div class="field">
<label>適用開始日:</label>
<input id="effectiveDate" type="text" value="" />
<button class="nablarch_DatePicker
-format yyyy/MM/dd
-locale ja
-input effectiveDate">
<i class="icon-calendar"></i>
</button>
</div>
次の記述例では、開閉ボタンを使用せずに、入力フィールドで直接カレンダーの開閉を行っている。 この場合、マーカCSSは入力フィールドに直接指定し、オプション -input は省略する。
<div class="field">
<label>適用開始日:</label>
<input
id="effectiveDate"
type="text"
value=""
class="nablarch_DatePicker
-format yyyy/MM/dd
-locale ja"
</div>
Item Index
Methods
Properties
- $calendar
- $input
- displayingDate
- event static
- format
- locale
- selectedDate
- today
- widgetType static
Methods
DatePicker
-
element
-
option
コンストラクタ関数。
第2引数に渡すオプションオブジェクトの内容は以下のとおり。
Parameters:
-
element
HTMLElementマーカCSSを指定したDOMノード
-
option
Objectオプションを格納したオブジェクト input: 日付を入力するINPUT要素のid属性値 locale: 表示言語 (デフォルト:ja) format: 日付フォーマット (デフォルト:yyyy/M/d)
Returns:
インスタンス
getDate
()
Date
選択された日付を取得する。 日付が選択されていない場合や、日付の形式が正しくない場合は null を返す。
Returns:
現在選択中の日付
Example:
// 選択された日付を取得する
var datePicker = $form.find(".nablarch_DatePicker").widget(DatePicker)
, selectedDate = datePicker.getDate();
hide
-
event
カレンダーを閉じる。
Parameters:
-
event
jQuery.Eventイベント
Returns:
常にfalseを返す。
show
-
event
カレンダーを開く。
Parameters:
-
event
jQuery.Eventイベント
Returns:
常にfalseを返す。
Properties
$calendar
JQuery
カレンダー表示部
$input
JQuery
入力フィールド
displayingDate
Date
現在表示しているカレンダーの基準日
event
Object
final
static
イベント定義
DatePicker.event = {
"click" : DatePicker_toggle
, "$calendar .thisMonth click" : DatePicker_selectDate
, "$calendar .nextMonth click" : DatePicker_nextMonth
, "$calendar .lastMonth click" : DatePicker_lastMonth
, "$calendar .nextYear click" : DatePicker_nextYear
, "$calendar .lastYear click" : DatePicker_lastYear
, "$calendar .today click" : DatePicker_today
, "$calendar .close click" : DatePicker_hide
, "$input blur" : DatePicker_format
};
format
String
日付のフォーマット
locale
String
表示言語
selectedDate
Date
選択中の日付
today
Date
現在日付(カレンダーを開いた時点で更新する。)
widgetType
String
final
static
モジュール識別名