Flex组件 DateField

 

转冷枫的，他写的太详细了，
日期选取组件用于显示日历和进行某天的选择，使用的是AS中的Date类。
创建DateChooser组件
下面的例子创建了一个日历组件，并且选中日期为2004年12月22号：

<mx:DateChooser id='date1' >

<mx:selectedDate>

<mx:Date month='12' date='12' year='2004' />

</mx:selectedDate>

</mx:DateChooser>

我们还可以通过脚本的方式来设置选中日期

<mx:Script>
<![CDATA[
function initDC()
{
date1.selectedDate= new Date (2004, 12, 12);
}
]]>
</mx:Script>
<mx:DateChooser id='date1' initialize='initDC();' />

DateChooser组件使用了AS的Date类的一些方法
可以使用get和set方法来获取选中的日期值以及设置日期值。下面的例子比较详细的描述了DateChooser组件的使用。

<mx:Script>

<![CDATA[

function useDate(eventObj)
{

//Access the Date object from the event object.

day.text=eventObj.target.selectedDate.getDay();

date.text=eventObj.target.selectedDate.getDate();

month.text=eventObj.target.selectedDate.getMonth();

year.text=eventObj.target.selectedDate.getFullYear();

wholeDate.text=eventObj.target.selectedDate.getFullYear() +

'/' + (eventObj.target.selectedDate.getMonth()+1) +

'/' + eventObj.target.selectedDate.getDate();

}

]]>

</mx:Script>

<mx:DateChooser id='date1' change='useDate(event)' />

<mx:Form>

<mx:FormItem label='Day' >

<mx:TextInput id='day' width='100' />

</mx:FormItem >

<mx:FormItem label='Day of month' >

<mx:TextInput id='date' width='100' />

</mx:FormItem >

<mx:FormItem label='Month' >

<mx:TextInput id='month' width='100' />

</mx:FormItem >

<mx:FormItem label='Year' >

<mx:TextInput id='year' width='100' />

</mx:FormItem >

<mx:FormItem label='Date' >

<mx:TextInput id='wholeDate' width='300' />

</mx:FormItem >

</mx:Form>

这个例子通过响应组件的change事件来获取选中的日期信息，相信大家也不难看懂。

禁用某个日期段的选取
假如要禁用周一到周四的日期选择，可以使用
<mx:DateChooser id='date1' >

<mx:disabledDays>
<mx:Array>
<mx:String>1</mx:String>

<mx:String>2</mx:String>

<mx:String>3</mx:String>

<mx:String>4</mx:String>

</mx:Array>

</mx:disabledDays>

</mx:DateChooser>

更简单的写法为：

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

或者

<mx:Script>
<![CDATA[
function initDC()
{
date1.disabledDays=[1,2,3,4];
}
]]>
</mx:Script>

<mx:DateChooser id='date1' initialize='initDC();' />

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

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

<mx:DateChooser id='date1' change='useDate(event);' >

<mx:dayNames>

<mx:Array>

<mx:String>日</mx:String>

<mx:String>一</mx:String>

<mx:String>二</mx:String>

<mx:String>三</mx:String>

<mx:String>四</mx:String>

<mx:String>五</mx:String>

<mx:String>六</mx:String>
</mx:Array>

</mx:dayNames>

</mx:DateChooser>

请注意，如果没有其它设置，数组的第一个元素就表示一周的第一天。当然，最简洁的还是AS的实现方法，而且更加灵活。

//设置星期显示名称

date1.dayNames=['日', '一', '二', '三', '四', '五', '六'];

//把周一作为每周的第一天

date1.myDC.firstDayOfWeek = 1;

//设置日历头部样式为绿色

date1.setStyle('headerColor', 0x00ff00);

//设置字体样式为斜体

date1.setStyle('fontStyle', 'italic');

//设置日历的选择范围2004.1.1～2004.12.23

date1.selectableRange =

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

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

 

 

 

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

 

 

1、<mx:DateField yearNavigationEnabled="true" change="dateChanged(DateField(event.target).selectedDate)" />

yearNavigationEnabled="true" 这个可以直接上调下调年份，比按前后箭头方便些

2、<mx:DateField id="dateField2" yearNavigationEnabled="true"
            disabledRanges="{[ {rangeEnd: new Date(2006, 5, 1)} ]}" />

2006年5月1日以前的不可选

3、<mx:DateField id="dateField2" yearNavigationEnabled="true"
            selectableRange="{{rangeStart : new Date(2006,0,1), rangeEnd : new Date(2006,5,30)}}" />

日期可选范围

4、<mx:DateField id="dateField2" yearNavigationEnabled="true"
            selectableRange="{{rangeStart : new Date(2006,0,1), rangeEnd : new Date(2006,5,30)}}" formatString="YYYY-MM-DD" />

文本字段中所显示日期的格式。此属性包含 "MM"、"DD"、"YY"、"YYYY"、分隔符和标点符号的任意组合。

5、显示格式若干属性：如，minYear最小年份，monthNames月份名，monthSymbol月份名后面的显示，showToday当日加亮，firstDayOfWeek 第一列显示的星期

6、待。。。。。

1、<mx:DateField yearNavigationEnabled="true" change="dateChanged(DateField(event.target).selectedDate)" />

yearNavigationEnabled="true" 这个可以直接上调下调年份，比按前后箭头方便些

2、<mx:DateField id="dateField2" yearNavigationEnabled="true"
            disabledRanges="{[ {rangeEnd: new Date(2006, 5, 1)} ]}" />

2006年5月1日以前的不可选

3、<mx:DateField id="dateField2" yearNavigationEnabled="true"
            selectableRange="{{rangeStart : new Date(2006,0,1), rangeEnd : new Date(2006,5,30)}}" />

日期可选范围

4、<mx:DateField id="dateField2" yearNavigationEnabled="true"
            selectableRange="{{rangeStart : new Date(2006,0,1), rangeEnd : new Date(2006,5,30)}}" formatString="YYYY-MM-DD" />

文本字段中所显示日期的格式。此属性包含 "MM"、"DD"、"YY"、"YYYY"、分隔符和标点符号的任意组合。

5、显示格式若干属性：如，minYear最小年份，monthNames月份名，monthSymbol月份名后面的显示，showToday当日加亮，firstDayOfWeek 第一列显示的星期

6、待。。。。。

 

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
verticalAlign="middle"
backgroundColor="#FCF9F9">



    <mx:ComboBox x="10" y="168"></mx:ComboBox>


    <mx:ComboBox x="10" y="248"></mx:ComboBox>
    <mx:DateField x="237" y="168" width="369" height="34" yearNavigationEnabled="true"  monthSymbol="月月发工资"  yearSymbol="年年有余" dayNames="[日，一，二，三，四，五，六]"
        monthNames="[一月，二月，三月，四月，五月，六月，七月，八月，九月，十月,十一月，十二月]" formatString="MM-DD-YYYY"/>

    <mx:DateField x="10" y="299" yearNavigationEnabled="true"
          dayNames="[日,一,二,三,四,五,六]" monthNames="[一月,二月,三月,四月,五月,六月,七月,八月,九月,十,      十一月,十二月]" formatString="YYYY-MM-DD" width="156" height="38"/>

</mx:Application>

 

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

 

 

 

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

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

view plain copy to clipboard print ?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <!-- Simple example to demonstrate the DateField control. -->  
3. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal" verticalAlign="top"  
4.     horizontalAlign="center" backgroundGradientColors="[0x000000,0x323232]" paddingTop="0" paddingBottom="0" viewSourceURL="srcview/index.html">  
5.   
6.     <mx:Script>  
7.       <!--[CDATA[  
8.   
9.          // Event handler for the DateField change event.   
10.          private function dateChanged(date:Date):void {  
11.             if (date == null)  
12.                 selection.text = "Date selected: ";                  
13.             else  
14.                 selection.text = "Date selected: " + date.getFullYear().toString() +   
15.                     '/' + (date.getMonth()+1).toString() + '/' + date.getDate();  
16.          }  
17.       ]]-->  
18.     </mx:Script>  
19.    
20.  <mx:DateFormatter id="df"/>  
21.   
22.     <mx:Panel title="DateField Control Example" width="600" color="0xffffff" borderAlpha="0.15" height="240"  
23.        layout="horizontal" horizontalGap="15" paddingLeft="10" paddingTop="10" paddingRight="10" paddingBottom="10" horizontalScrollPolicy="off" verticalScrollPolicy="off">  
24.           
25.         <mx:VBox width="50%" borderColor="0xDCDCDC" borderStyle="solid" height="100%" paddingLeft="10">  
26.             <mx:Label id="selection" color="0x323232" text="Date selected:" />  
27.               
28.             <mx:DateField id="dateField1" yearNavigationEnabled="true"  
29.                 change="dateChanged(DateField(event.target).selectedDate)" color="0x000000"/>  
30.                   
31.             <mx:Label color="0x000000" text="Basic DateField:"/>  
32.             <mx:Text width="100%" color="0x323232"  
33.                 text="Select a date in the DateField control. Select it again while holding down the Control key to clear it."/>  
34.               
35.         </mx:VBox>  
36.           
37.         <mx:VBox width="50%" borderColor="0xDCDCDC" borderStyle="solid" height="100%" paddingLeft="10">  
38.             <mx:Label color="0x323232" text="Date selected: {df.format(dateField2.selectedDate)}"/>  
39.               
40.             <mx:DateField id="dateField2" yearNavigationEnabled="true"   
41.                 disabledRanges="{[ {rangeEnd: new Date(2008, 9, 31)} ]}" color="0x000000"/>  
42.                   
43.             <mx:Text color="0x000000" text="Disable dates on or before Oct 31, 2008."/>  
44.         </mx:VBox>  
45.           
46.     </mx:Panel>  
47. </mx:Application>  

<?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来格式化

view plain copy to clipboard print ?

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

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

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

view plain copy to clipboard print ?

1. private static var dateFormatter:DateFormatter = new DateFormatter();  
2.   /** 
3.    * 格式化日期，封装mx.formatters.DateFormatter类 
4.    * 可以在模式字符串中添加其它文本，以进一步设置字符串格式。可以使用标点、数字和所有小写字母。 
5.    * 应该避免使用大写字母，因为大写字母可能被解读为模式字母。 
6.    *  
7.    * 年份 
8.    * YY = 05 
9.    * YYYY = 2005 
10.    * YYYYY = 02005 
11.    *  
12.    * 一年中的月份 
13.    * M = 7 
14.    * MM= 07 
15.    * MMM=Jul 
16.    * MMMM= July 
17.    *  
18.    * 一月中的日期 
19.    * D=4 
20.    * DD=04 
21.    * DD=10 
22.    *  
23.    * 星期中的天 
24.    * E = 1 
25.    * EE = 01 
26.    * EEE = Mon 
27.    * EEEE = Monday 
28.    *  
29.    * A am/pm 标记。  
30.    *  
31.    * J 一天中的小时数 (0-23)。  
32.    *  
33.    * H 一天中的小时数 (1-24)。  
34.    *  
35.    * K am/pm 中的小时数 (0-11)。  
36.    *  
37.    * L am/pm 中的小时数 (1-12)。  
38.    *  
39.    * 小时中的分钟数 
40.    * N = 3 
41.    * NN = 03 
42.    *  
43.    * 分钟中的秒数 
44.    * SS = 30 
45.    *  
46.    * @param value 日期 
47.    * @param formatString 格式 
48.    * @param return 指定格式的字符串 
49.    */  
50.   public static function formatDate(value:Object, formatString:String="YYYY-MM-DD"):String {  
51.    if (value == null || StringUtil.trim(value.toString()).length <= 0) {  
52.     return "-";  
53.    }  
54.    dateFormatter.formatString = formatString;  
55.    return dateFormatter.format(value);  
56.   }  

 http://blog.csdn.net/terryzero/article/details/4814059

http://varyall.iteye.com/blog/806659