Flex基础控件--DateField

 DateField控件可以让用户在图形化日历中选择日期。DateChooser控件的用户界面是日历。DateField控件有一个文本框，使用在弹出的日期选择器中选择的日期作为结果。DateField控件的属性集市DateChooser控件属性集的超集。

DateField这个控件由于功能单一，没什么好拓展的，所以比较简单。先举个例子

<?xml version="1.0" encoding="utf-8"?> <!-- Simple example to demonstrate the DateField control. --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal" verticalAlign="top" horizontalAlign="center" backgroundGradientColors="[0x000000,0x323232]" paddingTop="0" paddingBottom="0" viewSourceURL="srcview/index.html"> <mx:Script> <!--[CDATA[ // Event handler for the DateField change event. private function dateChanged(date:Date):void { if (date == null) selection.text = "Date selected: "; else selection.text = "Date selected: " + date.getFullYear().toString() + '/' + (date.getMonth()+1).toString() + '/' + date.getDate(); } ]]--> </mx:Script> <mx:DateFormatter id="df"/> <mx:Panel title="DateField Control Example" width="600" color="0xffffff" borderAlpha="0.15" height="240" layout="horizontal" horizontalGap="15" paddingLeft="10" paddingTop="10" paddingRight="10" paddingBottom="10" horizontalScrollPolicy="off" verticalScrollPolicy="off"> <mx:VBox width="50%" borderColor="0xDCDCDC" borderStyle="solid" height="100%" paddingLeft="10"> <mx:Label id="selection" color="0x323232" text="Date selected:" /> <mx:DateField id="dateField1" yearNavigationEnabled="true" change="dateChanged(DateField(event.target).selectedDate)" color="0x000000"/> <mx:Label color="0x000000" text="Basic DateField:"/> <mx:Text width="100%" color="0x323232" text="Select a date in the DateField control. Select it again while holding down the Control key to clear it."/> </mx:VBox> <mx:VBox width="50%" borderColor="0xDCDCDC" borderStyle="solid" height="100%" paddingLeft="10"> <mx:Label color="0x323232" text="Date selected: {df.format(dateField2.selectedDate)}"/> <mx:DateField id="dateField2" yearNavigationEnabled="true" disabledRanges="{[ {rangeEnd: new Date(2008, 9, 31)} ]}" color="0x000000"/> <mx:Text color="0x000000" text="Disable dates on or before Oct 31, 2008."/> </mx:VBox> </mx:Panel> </mx:Application>

基本上 DateField 组件的使用和 DateChooser 差不多，掌握了 DateChooser 组件， DateField 自然就不成问题。
另外注意知道的是 DateField 组件比 DateChooser 组件多了两个事件：
open 点击打开 DateChooser 组件的事件响应

close 用户选择了日期或者在DateChooser组件之外点击的事件响应

   

用以下方法来初始化Datafield

<mx:DateField id="date3" selectedDate="{new Date (2005, 3, 10)}"/>

 

下面讲下如何格式化时间，其实很简单DataField可以使用formatString来格式化

<mx:DateField monthNames='["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"]' formatString="YYYY-MM-DD" width="120"/>

最后讲下和时间格式相关的DateFormatter,注意格式表达式和JAVA中的不同

private static var dateFormatter:DateFormatter = new DateFormatter(); /** * 格式化日期，封装mx.formatters.DateFormatter类 * 可以在模式字符串中添加其它文本，以进一步设置字符串格式。可以使用标点、数字和所有小写字母。 * 应该避免使用大写字母，因为大写字母可能被解读为模式字母。 * * 年份 * YY = 05 * YYYY = 2005 * YYYYY = 02005 * * 一年中的月份 * M = 7 * MM= 07 * MMM=Jul * MMMM= July * * 一月中的日期 * D=4 * DD=04 * DD=10 * * 星期中的天 * E = 1 * EE = 01 * EEE = Mon * EEEE = Monday * * A am/pm 标记。 * * J 一天中的小时数 (0-23)。 * * H 一天中的小时数 (1-24)。 * * K am/pm 中的小时数 (0-11)。 * * L am/pm 中的小时数 (1-12)。 * * 小时中的分钟数 * N = 3 * NN = 03 * * 分钟中的秒数 * SS = 30 * * @param value 日期 * @param formatString 格式 * @param return 指定格式的字符串 */ public static function formatDate(value:Object, formatString:String="YYYY-MM-DD"):String { if (value == null || StringUtil.trim(value.toString()).length <= 0) { return "-"; } dateFormatter.formatString = formatString; return dateFormatter.format(value); }