wj-input-date ディレクティブを使用して、AngularJSアプリケーションに InputDate コントロールを追加できます。 ディレクティブ名とパラメーター名の書式は、キャメルケースではなくダッシュで結んだ小文字にする必要があります。 次に例を示します。

<p>InputDate コントロール</p>
<wj-input-date
  value="theDate"
  format="M/d/yyyy">
</wj-input-date>

次の例は、InputDate コントロールと InputTime コントロールを使用して、（日時の情報を含む） Date 値を表示します。どちらのコントロールも同じコントローラ変数に連結されており、 各コントロールはそれぞれの情報（日付または時刻）を編集します。この例では、１回のクリックで日付を選択できる Calendar コントロールも示しています。

例

wj-input-date ディレクティブは、次の属性をサポートします。

ng-model

@ Angular ng-modelディレクティブを使用して、コントロールの value プロパティを連結します。ng-modelディレクティブを使用してプロパティを連結すると、検証、フォームインスタンスへのコントロールの状態の追加などの標準機能を活用できます。ng-modelディレクティブによって連結されるコントロールのプロパティを再定義するには、wj-model-property属性を使用します。

wj-model-property

@ ng-model ディレクティブを使用して、スコープに連結するコントロールプロパティを指定します。

control

= このディレクティブによって作成された InputDate コントロールへの参照。

format

@ 編集中の日付の表示に使用される書式 Globalizeを参照）。

mask

@ユーザー入力時に入力の検証に使用されるマスク (wijmo.input.InputMask を参照）。

is-dropped-down

@ドロップダウンが現在表示されているかどうかを示す値。

initialized

&このイベントは、属性値でコントロールを初期化して連結処理が完了した後に発生します。

is-initialized

= 属性値でコントロールを初期化して連結処理が完了したかどうかを示す値。

max

@最も遅い有効な日付（書式"yyyy-MM-dd"の文字列）。

min

@ 最も早い有効な日付（書式"yyyy-MM-dd"の文字列）。

placeholder

@コントロールが空のときにヒントとして表示する文字列。

is-required

@null値を禁止するかどうかを示す値。

show-drop-down-button

@ コントロールにドロップダウンボタンを表示するかどうかを示す値。

text

=コントロールに表示するテキスト。

value

=編集中の日付。

got-focus

&InputDate.gotFocus イベントハンドラ。

lost-focus

&InputDate.lostFocus イベントハンドラ。

is-dropped-down-changing

&InputDate.isDroppedDownChanging イベントハンドラ。

is-dropped-down-changed

&InputDate.isDroppedDownChanged イベントハンドラ。

text-changed

&InputDate.textChanged イベントハンドラ。

value-changed

& InputDate.valueChanged イベントハンドラ。

min属性とmax属性を指定する場合、それらは書式"yyyy-MM-dd"の文字列にする必要があります。技術的には、W3Cの[RFC 3339]で定義されている任意の日時を使用できます。これは、標準HTML5入力要素でも使用される書式です。