【永恒的瞬间】
☜Give me hapy ☞
创建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
组件的常用属性和事件还有

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 // 移动的事件响应


通过对这些属性的设置你可以定义更强大的日历组件了。

posted on 2007-01-12 14:19 ☜♥☞MengChuChen 阅读(1154) 评论(1)  编辑  收藏 所属分类: flex2.0

FeedBack:
# re: Flex组件篇:DateChooser
2007-10-16 13:56 | xYz
那请问如果我要把特定日期加背景色,该如何实现呢?我只知道dayColor能设当前日子的背景色  回复  更多评论
  

只有注册用户登录后才能发表评论。


网站导航: