Flexのカレンダーで今日から1週間のみ選択可能にする方法


ちょいとこちらの記事(カレンダー(DateChooser)の土日に色をつける(Flex))を読んで、カレンダーコンポーネントでも勉強してみようかなぁってことでカレンダーで遊んでみました。
今回はカレンダーの日付選択の範囲を指定する方法を、簡単ですが説明してみたいと思います。
サンプルはこちら
http://moeten.info/flex/20091106_calendarTest/bin-release/main.html
FlexのカレンダークラスDateChooseを使って選択範囲を指定するには以下の形式でOKです。
以下のように書くだけで範囲を指定することができます。

disabledRanges="{[
  { rangeEnd   : new Date( 2009,10,4 ) },
  { rangeStart : new Date( 2009,10,10 ) }
]}"
/>

#Dateの月指定の部分は0から始まるので注意。
今日から1週間を選択可能にする方法ですが、今日より1日前と今日から1週間後の日をrangeEndとrangeStartに指定します。
まずはおさらいとして、今日の日付を取得する方法

new Date().getTime()

今日から、A日後の日付を取得する方法
こちらは今日の時間を取得して、日数x(1000 * 60 * 60 * 24)を加えることで求めることができます。

new Date( new Date().getTime() + A * 1000 * 60 * 60 * 24 ) }

詳しくはこちらに書いてあります。カレンダー日付と時刻の管理
ただし、祝日の判定などはActionScriptでは難しいので、PHPのholidayクラスを使用して、xmlで管理すると便利でしょう。
結果的に以下のような範囲指定をすれば、今日から1週間のみが選択可能となります。

<mx:DateChooser
    disabledRanges="{[
        { rangeEnd   : new Date( new Date().getTime() - 1 * 1000 * 60 * 60 * 24 ) },
        { rangeStart : new Date( new Date().getTime() + 7 * 1000 * 60 * 60 * 24 ) }
    ]}"
/>

また、範囲の指定で、特定の日だけを選択不可にすることもできます。
詳しくはこちらに書いてあります。Class DateChooser
すべてのソースコードはこちら。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#FFFFFF, #FFD6FD]" viewSourceURL="srcview/index.html">
<mx:Style>
DateChooser {
   cornerRadius: 12;
   borderThickness: 5;
   headerColors: #ffffff, #ff66ff;
   highlightAlphas: 1, 1;
   fillAlphas: 1, 1, 1, 1;
   fillColors: #ffffff, #ff66ff, #ffffff, #3366ff;
   todayColor: #ff6699;
   rollOverColor: #ffccff;
   selectionColor: #ffccff;
   color: #ff66cc;
   borderColor: #ffccff;
   backgroundColor: #ffffff;
   backgroundAlpha: 0.87;
   themeColor: #ff0066;
   dropShadowEnabled: true;
   shadowDistance: 8;
   shadowDirection: right;
   dropShadowColor: #cc0033;
   fontSize: 34;
   fontWeight: normal;
   fontStyle: italic;
   headerStyleName: "mydateChooserHeaderStyle";   weekDayStyleName: "mydateChooserWeekDayStyle";   todayStyleName: "mydateChooserTodayStyle";
   vertical-gap:20px;
   horizontal-gap:50px;
   vertical-align:middle;
   horizontal-align:center;
}
.mydateChooserHeaderStyle {
   color: #ffffff;
   fontSize: 28;
}
.mydateChooserWeekDayStyle {
   color: #cc00ff;
}
.mydateChooserTodayStyle {
   color: #ffffff;
}
</mx:Style>
<mx:Script>
<![CDATA[
import mx.effects.easing.Back;
]]>
</mx:Script>
<mx:Zoom id="myAnim" zoomHeightFrom="0.1" zoomWidthFrom="0.1" zoomHeightTo="1" zoomWidthTo="1" easingFunction="Back.easeOut"/>
<mx:DateChooser id="myDate" x="10" y="10" showToday="true" creationCompleteEffect="myAnim"
    change="{myLog.text =  '' + myDate.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="myLog" x="10" y="534" width="630" height="43"/>
</mx:Application>