Flex组件篇：DateChooser

JavaProgramers

墨衍会员 · AI 创作全网分发码龄22年

关注

原创最新推荐文章于 2021-02-27 01:02:36 发布 3.4k 阅读 AI 写同款· GEO 优化 ›

DateChooser DateChooser ASP.NET 2.0版之实用版，不用多说了，.NET牛人谭振林写的一个日期选择控件，需要用到的朋友们就下这个吧，没错的！立即下载

日期选取组件用于显示日历和进行某天的选择，使用的是AS中的Date类。
创建DateChooser组件
下面的例子创建了一个日历组件，并且选中日期为2004年12月22号：

<mx:DateChooser id='date1' >

2. <mx:selectedDate>

3. <mx:Date month='12' date='12' year='2004' />

4. </mx:selectedDate>

5. </mx:DateChooser>

我们还可以通过脚本的方式来设置选中日期

1. <mx:Script>

2. <![CDATA[

3. function initDC()

4. {

5. date1.selectedDate= new Date (2004, 12, 12);

6. }

7. ]]>

8. </mx:Script>

9. <mx:DateChooser id='date1' initialize='initDC();' />

DateChooser组件使用了AS的Date类的一些方法
可以使用get和set方法来获取选中的日期值以及设置日期值。下面的例子比较详细的描述了DateChooser组件的使用。

1. <mx:Script>

2. <![CDATA[

3. function useDate(eventObj)

4. {

5. //Access the Date object from the event object.

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:DateChooser id='date1' change='useDate(event)' />

17. <mx:Form>

18. <mx:FormItem label='Day' >

19. <mx:TextInput id='day' width='100' />

20. </mx:FormItem >

21. <mx:FormItem label='Day of month' >

22. <mx:TextInput id='date' width='100' />

23. </mx:FormItem >

24. <mx:FormItem label='Month' >

25. <mx:TextInput id='month' width='100' />

26. </mx:FormItem >

27. <mx:FormItem label='Year' >

28. <mx:TextInput id='year' width='100' />

29. </mx:FormItem >

30. <mx:FormItem label='Date' >

31. <mx:TextInput id='wholeDate' width='300' />

32. </mx:FormItem >

33. </mx:Form>

这个例子通过响应组件的change事件来获取选中的日期信息，相信大家也不难看懂。

禁用某个日期段的选取
假如要禁用周一到周四的日期选择，可以使用

1. <mx:DateChooser id='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>

更简单的写法为：

<mx:DateChooser id='date1' disabledDays='[1,2,3,4]' />

或者

1. <mx:Script>

2. <![CDATA[

3. function initDC()

4. {

5. date1.disabledDays=[1,2,3,4];

6. }

7. ]]>

8. </mx:Script>

9. <mx:DateChooser id='date1' initialize='initDC();' />

个人觉得第三种方法比较通用，可以对日历进行初始化的设置。
注意：正确的说法应该是禁用第2～5列的日期。

更改星期名称
默认的日历星期名显示为英文，如果要更改成中文名称，可以用：

1. <mx:DateChooser id='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. //设置星期显示名称

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: new Date(2004,1,1), rangeEnd: new Date(2004,12,23) };

DateChooser组件的常用属性和事件还有

01 :
02 : dayNames //星期的名称显示
03 : disabledDays //不可用的星期
04 : disabledRanges //不可用的日期范围
05 : displayedMonth //当前显示的月份
06 : displayedYear //当前显示的年份
07 : firstDayOfWeek //每周的第一天( 0～6 0表示dayNames中的第一个元素，依次类推 )
08 : headerStyle //头部样式
09 : todayStyle //今天的样式
10 : weekDayStyle //周末的样式
11 : monthNames //月份的名称显示
12 : selectableRange //可以选择的日期范围由rangeStart 和 rangeEnd 指定
13 : selectedDate //选中的日期
14 : showToday //是否高亮显示今天的日期
15 :
16 : change //选中日期的事件响应
17 : scroll //移动的事件响应