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, 5, 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, 5, 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来输出格式。