[冷枫]Flex组件篇:DateChooser

开发者在线 Builder.com.cn 更新时间:2007-09-23作者:冷枫 来源:CSDN

本文关键词: 冷枫 Flex 组件 DateChooser

日期选取组件用于显示日历和进行某天的选择,使用的是AS中的Date类。
创建DateChooser组件
下面的例子创建了一个日历组件,并且选中日期为20041222号:

<mx:DateChooser id='date1' >

 

2. <mx:selectedDate>

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

4. </mx:selectedDate>

5. </mx:DateChooser>

1.


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

 

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
组件使用了ASDate类的一些方法
可以使用getset方法来获取选中的日期值以及设置日期值。下面的例子比较详细的描述了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