本文和大家重點(diǎn)討論一下Flex DateChooser組件的使用，F(xiàn)lex DateChooser組件即日期選取組件，它主要用于顯示日歷和進(jìn)行某天的選擇，使用的是AS中的Date類。

Flex DateChooser組件

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

創(chuàng)建Flex DateChooser組件

下面的例子創(chuàng)建了一個(gè)日歷組件，并且選中日期為2004年12月22號(hào)：

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

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

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方法來獲取選中的日期值以及設(shè)置日期值。下面的例子比較詳細(xì)的描述了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> 

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

禁用某個(gè)日期段的選取

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

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> 

更簡(jiǎn)單的寫法為：

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();’/> 

個(gè)人覺得第三種方法比較通用，可以對(duì)日歷進(jìn)行初始化的設(shè)置。
注意：正確的說法應(yīng)該是禁用第2～5列的日期。

更改星期名稱

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

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> 

請(qǐng)注意，如果沒有其它設(shè)置，數(shù)組的第一個(gè)元素就表示一周的第一天。當(dāng)然，最簡(jiǎn)潔的還是AS的實(shí)現(xiàn)方法，而且更加靈活。

1:<?php//設(shè)置星期顯示名稱  
2:date1.dayNames=[’日’,’一’,’二’,’三’,’四’,’五’,’六’];  
3://把周一作為每周的第一天  
4:date1.myDC.firstDayOfWeek=1;  
5://設(shè)置日歷頭部樣式為綠色  
6:date1.setStyle(’headerColor’,0x00ff00);  
7://設(shè)置字體樣式為斜體  
8:date1.setStyle(’fontStyle’,’italic’);  
9://設(shè)置日歷的選擇范圍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//當(dāng)前顯示的月份  
06:displayedYear//當(dāng)前顯示的年份  
07:firstDayOfWeek//每周的第一天(0～60表示dayNames中的第一個(gè)元素，依次類推)  
08:headerStyle//頭部樣式  
09:todayStyle//今天的樣式  
10:weekDayStyle//周末的樣式  
11:monthNames//月份的名稱顯示  
12:selectableRange//可以選擇的日期范圍由rangeStart和rangeEnd指定  
13:selectedDate//選中的日期  
14:showToday//是否高亮顯示今天的日期  
15:  
16:change//選中日期的事件響應(yīng)  
17:scroll//移動(dòng)的事件響應(yīng)通過對(duì)這些屬性的設(shè)置你可以定義更強(qiáng)大的日歷組件了。 

【編輯推薦】

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