flex 日期选择 DateChooser ，DateField

在flex中DateChooser 和DateField 都是日期控件，让我们通过例子来看看他们的区别。

<?xml?version="1.0"?>

<!--?Simple?example?to?demonstrate?DateChooser?control.?-->

<mx:Application?xmlns:mx="http://www.adobe.com/2006/mxml">

<mx:Script>

<![CDATA[

private?function?displayDate(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:Script>

<![CDATA[

//?Event?handler?for?the?DateField?change?event.

private?function?dateChanged(date:Date):void?{

if?(date?==?null)

selection2.text?=?"Date?selected:?";????????????????

else

selection2.text?=?"Date?selected:?"?+?date.getFullYear().toString()?+?

'/'?+?(date.getMonth()+1).toString()?+?'/'?+?date.getDate();

}

]]>

</mx:Script>

<mx:DateFormatter?id="df"/>

<mx:Panel?title="DateChooser?Control?Example"?height="75%"?width="75%"?

??paddingTop="10"?paddingLeft="10"?paddingRight="10">

<mx:Label?width="100%"?color="blue"

??text="Select?a?date?in?the?DateChooser?control."/>

<mx:Label?width="100%"?color="blue"

text="Select?it?again?while?holding?down?the?Control?key?to?clear?it."/>

<mx:HBox?horizontalGap="25">

日期选择（1）,利用函数displayDate来编写格式

<mx:VBox>

<mx:Label?text="Simple?DateChooser?control."/>

<mx:DateChooser?id="dateChooser1"?yearNavigationEnabled="true"????

change="displayDate(DateChooser(event.target).selectedDate)"/>

注：1）yearNavigationEnabled="true"，改为false后，不显示2013后面的上下键，不可以改变年份

<mx:Label?id="selection"??color="blue"?text="Date?selected:"/>

</mx:VBox>

日期选择（2），利用DateFormatter来输出日期格式

<mx:VBox>

<mx:Label?text="Disable?dates?before?June?1,?2006."/>

<mx:DateChooser?id="dateChooser2"?yearNavigationEnabled="true"

disabledRanges="{[?{rangeEnd:?new?Date(2014,?5,?1)}?]}"/>

注：2）rangeEnd:?new?Date(2014,?1),表示2014年5月1日之前的日期不可用

<mx:Label??color="blue"?text="Date?selected:?{df.format(dateChooser2.selectedDate)}"/>

3）color="blue"，表示标签字体颜色为蓝色。

</mx:VBox>

</mx:HBox>

日期选择（3），利用函数dateChanged来编写格式【文本框格式】

<mx:VBox>

<mx:Label?text="Basic?DateField:"/>

<mx:DateField?id="dateField1"?yearNavigationEnabled="true"?

??change="dateChanged(DateField(event.target).selectedDate)"?/>

<mx:Label?id="selection2"??color="blue"?text="Date?selected:"?/>

日期选择（4），利用DateFormatter来输出日期格式【文本框格式】

<mx:Label?text="Disable?dates?on?or?before?June?1,?2006."/>

<mx:DateField?id="dateField2"?yearNavigationEnabled="true"?

??disabledRanges="{[?{rangeEnd:?new?Date(2006,?1)}?]}"?/>

<mx:Label??color="blue"?text="Date?selected:?{df.format(dateField2.selectedDate)}"/>

</mx:VBox>

</mx:Panel>????

</mx:Application>

总结： 1）日期格式控件有两种，DateChooser 和DateField 。

?????????? 2）DateChooser 为前两个（日历形式），而DateField 为后两个（文本框）。

?????????? 3)日期输出格式可以自定义函数（自定义函数，如：displayDate等），也可以利用原有的DateFormatter来输出格式。