Flex カレンダー日付 選択範囲の制御方法 - コントロール DateChooser
DateChooser コントロールを使った、日付の選択範囲を制御する方法です。
DateChooser コントロールは、月の名前、年、および月の各日を示すグリッドを表示し、そのグリッドの列ラベルとして曜日を表示します。ユーザーはある日付、日付の範囲、または複数の日付を選択できます。このコントロールには、月と年を前後に移動するための矢印ボタンがあります。ユーザーが複数の日付を選択できるようにしたり、特定の日付を選択できないようにしたり、表示される日付を一定の範囲に制限したりすることができます。
ここでは DateChooserコントロールを使った日付の選択範囲を制御する方法 を紹介します。
Sponsored Links
カレンダー日付 選択範囲の制御方法
実際にやってみると以下のようになります。
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="170"
height="250">
<fx:Declarations>
</fx:Declarations>
<fx:Style>
.default {
font-family: Tahoma,MS Gothic,SimSun,sans-serif,Arial;
font-size: 11;
font-weight: normal;
color: #333333;
}
</fx:Style>
<s:VGroup >
<mx:DateChooser id="dateChoose" showToday="true" styleName="default"
change="{logText.text = '' + dateChoose.selectedDate ; }"
disabledRanges="{[
{ rangeEnd : new Date( new Date().getTime() - 1 * 1000 * 60 * 60 * 24 ) },
{ rangeStart : new Date( new Date().getTime() + 7 * 1000 * 60 * 60 * 24 ) }
]}"
/>
<mx:TextArea id="logText" width="170" height="20" styleName="default"/>
</s:VGroup>
</s:WindowedApplication>
disabledRanges で、選択できる開始日と、終了日を設定しています。disabledRanges は、配列を設定することができます。実務では、稼働・非稼働の日付を管理する企業さんが多いので、そういった場合にも利用できますね。
結果は以下の通りです。
複数の日付を選択できるようにしたり、特定の日付を選択できないようにしたり、
表示される日付を一定の範囲に制限したりすることができます。
おつかれさまでした。
Sponsored Links