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

<p>Calendarコントロール:</p>
<wj-calendar
  value="theDate">
</wj-calendar>

例

次の例では、 Calendar コントロールを作成し、コントローラーによって公開された'date'変数にコントロールをバインドします。選択可能な日付の範囲は min プロパティと max プロパティによって制限されています。

wj-calendar ディレクティブは以下の属性をサポートしています。

ng-model

@ Angularのng-modelディレクティブを使用してコントロールのvalueプロパティをバインドします。ng-modelディレクティブを使用してプロパティをバインドすると、データ検証やコントロールの状態のフォームインスタンスへの公開など、ng-modelの持つ利点を活用できます。ng-modelディレクティブによってバインドされるコントロールのプロパティを再定義するには、wj-model-property属性を使用します。

wj-model-property

@ ng-model ディレクティブを使用してスコープにバインドされるコントロールプロパティを指定します。

control

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

display-month

= カレンダーに表示する月。

first-day-of-week

@ 週の最初の曜日。

initialized

& このイベントは、バインディングによるコントロールの初期化が完了した後に発生します。

is-initialized

= バインディングによるコントロールの初期化が完了したかどうかを示す値。

item-formatter

= カレンダーに表示される日付のカスタマイズに使用される関数。

max

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

min

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

month-view

@ コントロールに1か月と1年のどちらを表示するかを示す値。

show-header

@ コントロールにヘッダ領域を表示するかどうかを示す値。

value

= 編集する日付。

got-focus

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

lost-focus

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

value-changed

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

min および max 属性を指定する場合、それらは書式"yyyy-MM-dd"の文字列にする必要があります。 技術的には、W3C [RFC 3339]で定義された任意のfull-dateを使用できます。これは通常のHTML5入力要素で使用される書式でもあります。