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>