API Docs for: 1.0.0
Show:

nablarch.ui.DatePicker Class

Defined in: nablarch-widget-field-calendar\ui_public\js\nablarch\ui\DatePicker.js:8
Module: jsp.taglib

Available since 1.2

日付入力機能

日付入力機能は日付文字列を入力するための入力補助UI部品である。 日付入力機能は、以下の3つの要素から構成される。

  1. 入力フィールド
  2. カレンダーの開閉を行う要素
  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>

Methods

DatePicker

(
  • element
  • option
)
DatePicker

Defined in nablarch-widget-field-calendar\ui_public\js\nablarch\ui\DatePicker.js:63

コンストラクタ関数。

第2引数に渡すオプションオブジェクトの内容は以下のとおり。

Parameters:

  • element HTMLElement

    マーカCSSを指定したDOMノード

  • option Object

    オプションを格納したオブジェクト input: 日付を入力するINPUT要素のid属性値 locale: 表示言語 (デフォルト:ja) format: 日付フォーマット (デフォルト:yyyy/M/d)

Returns:

DatePicker:

インスタンス

getDate

() Date

Defined in nablarch-widget-field-calendar\ui_public\js\nablarch\ui\DatePicker.js:138

選択された日付を取得する。 日付が選択されていない場合や、日付の形式が正しくない場合は null を返す。

Returns:

Date:

現在選択中の日付

Example:

// 選択された日付を取得する
var datePicker   = $form.find(".nablarch_DatePicker").widget(DatePicker)
  , selectedDate = datePicker.getDate();

hide

(
  • event
)
Boolean

Defined in nablarch-widget-field-calendar\ui_public\js\nablarch\ui\DatePicker.js:131

カレンダーを閉じる。

Parameters:

  • event jQuery.Event

    イベント

Returns:

Boolean:

常にfalseを返す。

show

(
  • event
)
Boolean

Defined in nablarch-widget-field-calendar\ui_public\js\nablarch\ui\DatePicker.js:124

カレンダーを開く。

Parameters:

  • event jQuery.Event

    イベント

Returns:

Boolean:

常にfalseを返す。

Properties

$calendar

JQuery

Defined in nablarch-widget-field-calendar\ui_public\js\nablarch\ui\DatePicker.js:114

カレンダー表示部

$input

JQuery

Defined in nablarch-widget-field-calendar\ui_public\js\nablarch\ui\DatePicker.js:108

入力フィールド

displayingDate

Date

Defined in nablarch-widget-field-calendar\ui_public\js\nablarch\ui\DatePicker.js:84

現在表示しているカレンダーの基準日

event

Object final static

Defined in nablarch-widget-field-calendar\ui_public\js\nablarch\ui\DatePicker.js:153

イベント定義

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

Defined in nablarch-widget-field-calendar\ui_public\js\nablarch\ui\DatePicker.js:96

日付のフォーマット

selectedDate

Date

Defined in nablarch-widget-field-calendar\ui_public\js\nablarch\ui\DatePicker.js:78

選択中の日付

today

Date

Defined in nablarch-widget-field-calendar\ui_public\js\nablarch\ui\DatePicker.js:90

現在日付(カレンダーを開いた時点で更新する。)

widgetType

String final static

Defined in nablarch-widget-field-calendar\ui_public\js\nablarch\ui\DatePicker.js:217

モジュール識別名