Flex组件篇:DateChooser

原创 2006年05月25日 17:23:00

日期选取组件用于显示日历和进行某天的选择,使用的是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</mx:String>
 

8. </mx:Array>
 

9. </mx:disabledDays>

10.  </mx:DateChooser>

 


更简单的写法为:

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

 

1.


或者

 

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();' />

 


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

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

 

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 //每周的第一天( 06 0表示dayNames中的第一个元素,依次类推 )
08 : headerStyle //头部样式
09 : todayStyle //今天的样式
10 : weekDayStyle //周末的样式
11 : monthNames //月份的名称显示
12 : selectableRange //可以选择的日期范围 rangeStart rangeEnd 指定
13 : selectedDate //选中的日期
14 : showToday //是否高亮显示今天的日期
15 :
16 : change //
选中日期的事件响应
17 : scroll //移动的事件响应


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

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

Flex4 DateChooser控件之SCroll事件来设定年月

首先要设定当前年和月: //日历设置变量,当前日历控件中的年和月 public var currentMonth:Number; public var currentYear:Number; .....

Flex4_DateChooser_DateField

【Flex4.6】TabBar组件运用【华丽篇】

flex flex组件 TabBar组件运用,导航组件的切换

浅淡FLEX spark组件-容器篇

前台什么的做多了,对做FLEX有些排斥,但这样很不好。既然决定想做游戏了,那只能继续下去。 于是我又装上了UBUNTU,花了一整天把FLEX SDK和FLEX IN MYECLIPSE给配了起来,总...

Flash组件教程——Flex组件篇:HSlider和VSlider

Flex提供了水平和垂直两种滑动杆。 基本使用方法:01 : mx:HSlider 创建水平滑动杆02 : mx:VSlider 创建垂直滑动杆03 : 设置滑动范围:minimum和 ...

flex 重写组件

  • 2017-08-26 21:27
  • 48KB
  • 下载

将flex组件添加到papervision3d

上一篇文章介绍了如何将papervision3d作为组件添加到flex中。地址如下:http://blog.csdn.net/sing_sing/archive/2011/03/23/6270637....

flex自定义组件事件DEMO

  • 2014-11-18 21:49
  • 2.41MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)