DateSpinnerコンポーネント
DateSpinnerは、前述のSprinnerContainerとSpinnerListを拡張した、日付選択コンポーネントです。次の3つの表示モードを備えています。
- 「日付」表示（年月日） displayMode=”date”
- 「時刻」表示（時分） displayMode=”time”
- 「日付＋時刻」表示（月日時分） displayMode=”dateAndTime”
さらにロケールにも対応しているので、日本表記にする場合は、localeスタイルプロパティに”ja_JP”という値を指定します（デフォルト値は“en_US”）。他にも、選択できる日付の範囲を指定することができるminDate／maxDateプロパティや、選択できる分間隔を指定するminuteStepSizeプロパティが用意されています。
次のコードは、DateSpinnerコンポーネントを使ったサンプルで、ロケールは“ja_JP”、表示モードは日付に設定しています（サンプル：DateSpinnerSample.fxp）
DateSpinnerSample/src/views/DateSpinnerSampleView01.mxml
<?xml version="1.0" encoding="utf-8"?> <!--- DateSpinner Sample 01 --> <s:View xmlns:fx = "http://ns.adobe.com/mxml/2009" xmlns:s = "library://ns.adobe.com/flex/spark" title = "SpinnerList Sample 01" > <s:DateSpinner width = "400" displayMode = "date" verticalCenter = "0" horizontalCenter = "0" locale = "ja_JP" /> </s:View>
図4 DateSpinnerSampleView01.mxmlの出力結果
現在の日付となる選択肢部分は青色で表示されます（時刻表示のときには適用されません）。
他の指定方法と出力結果を以下にまとめました。
ロケール：“ja_JP”、表示モード：時間
DateSpinnerSample/src/views/DateSpinnerSampleView02.mxml
<s:DateSpinner displayMode = "time" locale = "ja_JP" />
図5 DateSpinnerSampleView02.mxmlの出力結果（“ja_JP”では24時間表示となります）
ロケール：“en_US”、表示モード：時間
DateSpinnerSample/src/views/DateSpinnerSampleView03.mxml
<s:DateSpinner displayMode = "time" locale = "en_US" />
図6 DateSpinnerSampleView03.mxmlの出力結果（“en_US”ではAM／PM表示）
ロケール：“ja_JP”、表示モード：日付＋時間
DateSpinnerSample/src/views/DateSpinnerSampleView04.mxml
<s:DateSpinner displayMode = "dateAndTime" locale = "ja_JP" />
図7 DateSpinnerSampleView04.mxmlの出力結果
ロケール：“ja_JP”、表示モード：日付（選択範囲を制限）
DateSpinnerSample/src/views/DateSpinnerSampleView05.mxml
<s:DateSpinner
displayMode = "date"
locale = "ja_JP"
minDate = "{new Date(2000, 10, 1)}"
maxDate = "{new Date(2020, 11, 1)}"
selectedDate = "{new Date(2011, 10, 20)}"
/>
図8 DateSpinnerSampleView05.mxmlの出力結果
ロケール：“en_US”、表示モード：時間（選択肢を15分間隔に設定）
DateSpinnerSample/src/views/DateSpinnerSampleView06.mxml
<s:DateSpinner displayMode = "time" locale = "en_US" minuteStepSize = "15" />
図9 DateSpinnerSampleView06.mxmlの出力結果
