扫一扫
分享文章到微信
扫一扫
关注官方公众号
至顶头条
作者：冷枫 来源：CSDN 2007年9月23日
关键字： 冷枫 Flex 组件 DateChooser 软件
日期选取组件用于显示日历和进行某天的选择，使用的是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列的日期。
如果您非常迫切的想了解IT领域最新产品与技术信息，那么订阅至顶网技术邮件将是您的最佳途径之一。
现场直击｜2021世界人工智能大会
直击5G创新地带，就在2021MWC上海
5G已至 转型当时——服务提供商如何把握转型的绝佳时机
寻找自己的Flag
华为开发者大会2020（Cloud）- 科技行者
京公网安备 11010802021500号