Flex DateChooser控件概述

时间：2010-07-29 来源：luochaoboy

1 DateChooser控件概述

日期选择器控件的界面是一个日历，其中显示了月份，年份和在栅格中的日期以及星期标签。用户可以选择单个的日期。此控件包含前进和后退箭头按钮，用于改变年份和月份。可以允许用户选择多个日期，禁止选择特定日期和只限于显示某个日期范围。

参考文献：

DateChoose控件概述.

http://help.adobe.com/zh_CN/AS3LCR/Flex_4.0/mx/controls/DateChooser.html

2 DateChooser控件常用属性和方法

名称	分类	说明
Change	事件	当选择或更改某个日期时分派
yearNavigationEnabled:boolean	属性	启用年份导航。如果为 true，则显示的年份右侧会出现向上和向下按钮。
monthNames：Array	属性	显示在 DateChooser 控件顶部的月份名称
disabledRanges:Array	属性	此属性接受对象 Array 作为参数。此数组中的所有对象都是 Date 对象，用于指定要禁用的各个日期；也可以是一个包含 rangeStart 和（或）rangeEnd 属性的对象。这些属性的值描述了日期范围的边界。如果忽略其中任一属性，则认为在该方向上无范围限制。如果仅指定 rangeStart，则将禁用指定日期之后的所有日期（包括 rangeStart 日期）。如果仅指定 rangeEnd，则将禁用指定日期之前的所有日期（包括 rangeEnd 日期）。要禁用单个日期，请使用一个 Date 对象指定 Array 中的某个日期。时间值（如果存在）将以 Date 对象为零值，依次递增。
contextMenu : NativeMenu（待查）	属性	指定与此对象相关联的上下文菜单。
dayNames : Array	属性	更改此属性可更改 DateChooser 控件的日期标签。星期日为第一天（在索引为 0 处）。一周中其余的天按照正常的顺序命名。
enabled : Boolean	属性	组件是否可以接受用户交互
filters : Array（待查）。	属性	包含当前与显示对象关联的每个滤镜对象的索引数组
moduleFactory : IFlexModuleFactory（待查）	属性	模块工厂用作上下文，用于为此组件使用嵌入字体以及查找用于控制此组件样式的样式管理器。

3 DateChooser使用方法

3.1 通过change事件将用户选择的日期显示

功能：当用户点击DateChooser控件上的某个日期时，文本框中显示该日期，代码如下：

<mx:DateChooser x="424" y="102" id="dc" change="displayDate(DateChooser(event.target).selectedDate)"/>

<s:Label x="239" y="375" width="183" height="43" id="lb" />

参考文献

《Flex从入门到精通》

3.2 通过monthNames属性更改月份的显示效果

功能：用户可以改变默认的英文月份，而自定义显示自己要的效果，代码如下：

<mx:DateChooser x="78" y="64" monthNames='["a","b","c","d","e","f","g","h","i","j","k","L"]' />

3.3 通过disabledRanges属性禁止用户选择某些日期的示例

功能：可以使某些日期不能被用户选择，代码如下：

<mx:DateChooser x="162" y="74" disabledRanges="{[{rangeStart: new Date(2010,6,23), rangeEnd: new Date(2010,6,25)} ]}"/>

说明：其禁止用户选择从2010年7月23日到2010年7月25日（注意在DateChooser控件中月份是从0-11的，也就是说0代表1月，1代表2月以此类推）