本文和大家重點討論一下Flex DateChooser組件的使用，Flex DateChooser組件即日期選取組件，它主要用于顯示日歷和進行某天的選擇，使用的是AS中的Date類。

Flex DateChooser組件

日期選取組件用于顯示日歷和進行某天的選擇，使用的是AS中的Date類。

創建Flex DateChooser組件

下面的例子創建了一個日歷組件，并且選中日期為2004年12月22號：

1:<?php<mx:DateChooseridmx:DateChooserid=’date1’> 
2:<mx:selectedDate> 
3:<mx:Datemonthmx:Datemonth=’12’date=’12’year=’2004’/> 
4:</mx:selectedDate> 
5:</mx:DateChooser> 

我們還可以通過腳本的方式來設置選中日期

1:<?php<mx:Script> 
2:<![CDATA[  
3:functioninitDC()  
4:{  
5:date1.selectedDate=newDate(2004,12,12);  
6:}  
7:]]> 
8:</mx:Script> 
9:<mx:DateChooseridmx:DateChooserid=’date1’initialize=’initDC();’/> 

Flex DateChooser組件使用了AS的Date類的一些方法

可以使用get和set方法來獲取選中的日期值以及設置日期值。下面的例子比較詳細的描述了Flex DateChooser組件的使用。

1:<?php<mx:Script> 
2:<![CDATA[  
3:functionuseDate(eventObj)  
4:{  
5://AccesstheDateobjectfromtheeventobject.  
6:day.text=eventObj.target.selectedDate.getDay();  
7:date.text=eventObj.target.selectedDate.getDate();  
8:month.text=eventObj.target.selectedDate.getMonth();  
9:year.text=eventObj.target.selectedDate.getFullYear();  
10:wholeDate.text=eventObj.target.selectedDate.getFullYear()+  
11:’/’+(eventObj.target.selectedDate.getMonth()+1)+  
12:’/’+eventObj.target.selectedDate.getDate();  
13:}  
14:]]> 
15:</mx:Script> 
16:<mx:DateChooseridmx:DateChooserid=’date1’change=’useDate(event)’/> 
17:<mx:Form> 
18:<mx:FormItemlabelmx:FormItemlabel=’Day’> 
19:<mx:TextInputidmx:TextInputid=’day’width=’100’/> 
20:</mx:FormItem> 
21:<mx:FormItemlabelmx:FormItemlabel=’Dayofmonth’> 
22:<mx:TextInputidmx:TextInputid=’date’width=’100’/> 
23:</mx:FormItem> 
24:<mx:FormItemlabelmx:FormItemlabel=’Month’> 
25:<mx:TextInputidmx:TextInputid=’month’width=’100’/> 
26:</mx:FormItem> 
27:<mx:FormItemlabelmx:FormItemlabel=’Year’> 
28:<mx:TextInputidmx:TextInputid=’year’width=’100’/> 
29:</mx:FormItem> 
30:<mx:FormItemlabelmx:FormItemlabel=’Date’> 
31:<mx:TextInputidmx:TextInputid=’wholeDate’width=’300’/> 
32:</mx:FormItem> 
33:</mx:Form> 

這個例子通過響應組件的change事件來獲取選中的日期信息，相信大家也不難看懂。

禁用某個日期段的選取

假如要禁用周一到周四的日期選擇，可以使用

1:<?php<mx:DateChooseridmx:DateChooserid=’date1’> 
2:<mx:disabledDays> 
3:<mx:Array> 
4:<mx:String>1</mx:String> 
5:<mx:String>2</mx:String> 
6:<mx:String>3</mx:String> 
7:<mx:String>4</mx:String> 
8:</mx:Array> 
9:</mx:disabledDays> 
10:</mx:DateChooser> 

更簡單的寫法為：

1:<?php<mx:DateChooseridmx:DateChooserid=’date1’disabledDays=’[1,2,3,4]’/> 

或者

1:<?php<mx:Script> 
2:<![CDATA[  
3:functioninitDC()  
4:{  
5:date1.disabledDays=[1,2,3,4];  
6:}  
7:]]> 
8:</mx:Script> 
9:<mx:DateChooseridmx:DateChooserid=’date1’initialize=’initDC();’/> 

個人覺得第三種方法比較通用，可以對日歷進行初始化的設置。
注意：正確的說法應該是禁用第2～5列的日期。

更改星期名稱

Flex DateChooser組件中默認的日歷星期名顯示為英文，如果要更改成中文名稱，可以用：
 

1:<?php<mx:DateChooseridmx:DateChooserid=’date1’change=’useDate(event);’> 
2:<mx:dayNames> 
3:<mx:Array> 
4:<mx:String>日</mx:String> 
5:<mx:String>一</mx:String> 
6:<mx:String>二</mx:String> 
7:<mx:String>三</mx:String> 
8:<mx:String>四</mx:String> 
9:<mx:String>五</mx:String> 
10:<mx:String>六</mx:String> 
11:</mx:Array> 
12:</mx:dayNames> 
13:</mx:DateChooser> 

請注意，如果沒有其它設置，數組的第一個元素就表示一周的第一天。當然，最簡潔的還是AS的實現方法，而且更加靈活。

1:<?php//設置星期顯示名稱  
2:date1.dayNames=[’日’,’一’,’二’,’三’,’四’,’五’,’六’];  
3://把周一作為每周的第一天  
4:date1.myDC.firstDayOfWeek=1;  
5://設置日歷頭部樣式為綠色  
6:date1.setStyle(’headerColor’,0x00ff00);  
7://設置字體樣式為斜體  
8:date1.setStyle(’fontStyle’,’italic’);  
9://設置日歷的選擇范圍2004.1.1～2004.12.23  
10:date1.selectableRange=  
11:{rangeStart:newDate(2004,1,1),rangeEnd:newDate(2004,12,23)}; 

Flex DateChooser組件的常用屬性和事件還有
 

01:  
02:dayNames//星期的名稱顯示  
03:disabledDays//不可用的星期  
04:disabledRanges//不可用的日期范圍  
05:displayedMonth//當前顯示的月份  
06:displayedYear//當前顯示的年份  
07:firstDayOfWeek//每周的第一天(0～60表示dayNames中的第一個元素，依次類推)  
08:headerStyle//頭部樣式  
09:todayStyle//今天的樣式  
10:weekDayStyle//周末的樣式  
11:monthNames//月份的名稱顯示  
12:selectableRange//可以選擇的日期范圍由rangeStart和rangeEnd指定  
13:selectedDate//選中的日期  
14:showToday//是否高亮顯示今天的日期  
15:  
16:change//選中日期的事件響應  
17:scroll//移動的事件響應通過對這些屬性的設置你可以定義更強大的日歷組件了。 

【編輯推薦】

1. 深入學習Flex組件生命周期
2. 技術分享 如何重寫Flex組件
3. AS方式重寫Flex組件常規步驟
4. FlexBuilder3.0與Eclipse3.4的完美結合
5. 剖析Flex DataGrid分頁控件的兩種分頁形式用法