全面认识Flex DateChooser组件-51CTO.COM

本文和大家重点讨论一下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//移动的事件响应通过对这些属性的设置你可以定义更强大的日历组件了。

【编辑推荐】