论坛风格切换切换到宽版
  • 19480阅读
  • 0回复

flex 日期控件 日期组件 DateChooser 和 DateField [复制链接]

上一主题 下一主题
 

发帖
1077
只看楼主 倒序阅读 使用道具 楼主  发表于: 2010-07-05
官方教程 http://help.adobe.com/zh_CN/flex/using/WS2db454920e96a9e51e63e3d11c0bf69084-7d9b.html
http://help.adobe.com/zh_CN/AS3LCR/Flex_4.0/mx/controls/DateField.html#displayedMonth

DateChooser  控件


DateField 控件  比上面多了文本输入框



通过下面这个例子简要介绍一下
  1. <?xml version="1.0"?>
  2. <!-- controls\date\DateChooserEvent.mxml -->
  3. <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
  4.     xmlns:s="library://ns.adobe.com/flex/spark"
  5.     xmlns:mx="library://ns.adobe.com/flex/mx">
  6.     <fx:Script>
  7.         <![CDATA[
  8.         import mx.events.CalendarLayoutChangeEvent;
  9.         
  10.         private function useDate(eventObj:CalendarLayoutChangeEvent):void {
  11.             // Make sure selectedDate is not null.
  12.             if (eventObj.currentTarget.selectedDate == null) {
  13.                 return
  14.             }
  15.             //Access the Date object from the event object.        
  16.             day.text=eventObj.currentTarget.selectedDate.getDay();
  17.             date.text=eventObj.currentTarget.selectedDate.getDate();
  18.             month.text=eventObj.currentTarget.selectedDate.getMonth() + 1;
  19.             year.text=eventObj.currentTarget.selectedDate.getFullYear();
  20.             
  21.             wholeDate.text= (eventObj.currentTarget.selectedDate.getMonth() + 1) +
  22.                 "/" + (eventObj.currentTarget.selectedDate.getDate() +            
  23.                 "/" + eventObj.currentTarget.selectedDate.getFullYear());
  24.         }
  25.         ]]>
  26.     </fx:Script>
  27.     <mx:DateChooser id="date1" change="useDate(event)"/>
  28.     <mx:Form x="200">
  29.         <mx:FormItem label="Day of week">
  30.             <mx:TextInput id="day" width="100"/>
  31.         </mx:FormItem>
  32.         <mx:FormItem label="Day of month">
  33.             <mx:TextInput id="date" width="100"/>
  34.         </mx:FormItem>
  35.         <mx:FormItem label="Month">
  36.             <mx:TextInput id="month" width="100"/>
  37.         </mx:FormItem>
  38.         <mx:FormItem label="Year">
  39.             <mx:TextInput id="year" width="100"/>
  40.         </mx:FormItem>
  41.         <mx:FormItem label="Date">
  42.             <mx:TextInput id="wholeDate" width="100"/>
  43.         </mx:FormItem>
  44.     </mx:Form>      
  45. </s:Application>



其中 属性 selectedDate.getDay()为得到一星期的第几天,selectedDate.getDate();  selectedDate.getMonth() + 1; selectedDate.getFullYear(); 依次为得到日,月 ,年

注意 月需要+1 因为系统设定 一月为0, 十二月为11。 还有按住ctrl键可以取消选择日期



下面介绍一下如何修改控件的样式

  • headerStyleName
  • weekDayStyleName
  • todayStyleName
  1. <?xml version="1.0"?>
  2. <!-- controls\date\DateChooserStyles.mxml -->
  3. <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
  4.     xmlns:s="library://ns.adobe.com/flex/spark"
  5.     xmlns:mx="library://ns.adobe.com/flex/mx">
  6.     
  7.     <fx:Style>
  8.         .myHeaderStyle{
  9.             color:#6666CC;
  10.             font-family:Times New Roman, Times, serif;
  11.             font-size:16px; font-weight:bold;}
  12.         .myTodayStyle{
  13.             color:#CC6633;
  14.             font-family:Times New Roman, Times, serif;
  15.             font-size:12px; font-weight:bold;}
  16.         .myDayStyle{
  17.             color:#006600;
  18.             font-family:Courier New, Courier, mono;
  19.             font-size:15px; font-style:italic; font-weight:bold;}
  20.     </fx:Style>
  21.     <mx:DateChooser
  22.         headerStyleName="myHeaderStyle"
  23.         todayStyleName="myTodayStyle"
  24.         todayColor="#CCCCCC"
  25.         weekDayStyleName="myDayStyle"/>
  26. </s:Application>





下面介绍一下如何指定可选择的区域
[pre]disabledDays  指定不可选择的某个星期几的数组
disabledRange 指定不可选择的某天的数组
selectableRange 指定可选择的某天的数组

  1. <?xml version="1.0"?>
  2. <!-- controls\date\DateChooserSelectable.mxml -->
  3. <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
  4.     xmlns:s="library://ns.adobe.com/flex/spark"
  5.     xmlns:mx="library://ns.adobe.com/flex/mx">
  6.     
  7.   <mx:DateChooser
  8.     selectableRange="{{rangeStart: new Date(2006,0,1),
  9.         rangeEnd: new Date(2006,2,15)}}"
  10.     disabledRanges="{[new Date(2006,0,11),
  11.         {rangeStart: new Date(2006,0,23), rangeEnd: new Date(2006,1,10)}]}"
  12.     disabledDays="{[0,6]}"/>
  13. </s:Application>





通过mxml标签限定选择区域

  1. <?xml version="1.0"?>
  2. <!-- controls\date\DateChooserDisabledOption.mxml -->
  3. <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
  4.     xmlns:s="library://ns.adobe.com/flex/spark"
  5.     xmlns:mx="library://ns.adobe.com/flex/mx">
  6.     
  7.     <!-- Use tags.-->
  8.     <mx:DateField>
  9.             <mx:disabledDays>
  10.                 <fx:Number>0</fx:Number>
  11.                 <fx:Number>6</fx:Number>
  12.             </mx:disabledDays>
  13.     </mx:DateField>    
  14.     <!-- Use tag attributes.-->
  15.     <mx:DateField disabledDays="[0,6]"/>
  16. </s:Application>




下面通过初始化函数 改变日期的颜色和表头
  1. <?xml version="1.0"?>
  2. <!-- controls\date\DateChooserInitializeEvent.mxml -->
  3. <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
  4.     xmlns:s="library://ns.adobe.com/flex/spark"
  5.     xmlns:mx="library://ns.adobe.com/flex/mx">
  6.     <fx:Script>
  7.         <![CDATA[
  8.             import mx.events.DateChooserEvent;
  9.             private function dateChooser_init():void {
  10.                 myDC.dayNames=['Sun', 'Mon', 'Tue',
  11.                     'Wed', 'Th', 'Fri', 'Sat'];
  12.                 myDC.firstDayOfWeek = 3;
  13.                 myDC.setStyle("headerColor", 0xff0000);
  14.                 myDC.selectableRange = {rangeStart: new Date(2009,0,1),
  15.                     rangeEnd: new Date(2012,0,10)};
  16.             }
  17.         
  18.             private function onScroll():void {
  19.                 myDC.setStyle("fontStyle", "italic");
  20.             }
  21.         ]]>
  22.     </fx:Script>
  23.     <mx:DateChooser id="myDC"
  24.         width="200"
  25.         creationComplete="dateChooser_init();"
  26.         scroll="onScroll();"/>
  27. </s:Application>





selectableRange 属性介绍  下面的代码创建了2个日期的类 rangeStart:cDate, rangeEnd:cDate,开始和结束日期 。 数据来源为XML id="shows"

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <!-- controls\date\ProgrammaticDateChooserSelector.mxml -->
  3. <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
  4.     xmlns:s="library://ns.adobe.com/flex/spark"
  5.     xmlns:mx="library://ns.adobe.com/flex/mx"
  6.     creationComplete="init()">
  7.     <fx:Script>
  8.         <![CDATA[
  9.             private function init():void {
  10.                 dc1.displayedMonth = 1;
  11.                 dc1.displayedYear = 2008;
  12.             }          
  13.             
  14.             public function displayDates():void {
  15.                 var dateRanges:Array = [];
  16.                 for (var i:int=0; i<shows.show.length(); i++) {
  17.                     var cDate:Date =
  18.                         new Date(shows.show.showDate.toString());          
  19.                     var cDateObject:Object =
  20.                         {rangeStart:cDate, rangeEnd:cDate};
  21.                     dateRanges.push(cDateObject);
  22.                 }
  23.                 dc1.selectedRanges = dateRanges;
  24.             }          
  25.         ]]>
  26.     </fx:Script>
  27.     <!-- Define the data for the DateChooser -->    
  28.     <fx:Declarations>
  29.     <fx:XML id="shows" format="e4x">
  30.         <data>
  31.             <show>
  32.                <showID>1</showID>
  33.                 <showDate>02/28/2008</showDate>
  34.                 <showTime>10:45am/11:15am</showTime>
  35.             </show>
  36.             <show>
  37.                 <showID>2</showID>
  38.                 <showDate>02/23/2008</showDate>
  39.                 <showTime>7:00pm</showTime>
  40.             </show>
  41.         </data>
  42.     </fx:XML>
  43.     </fx:Declarations>
  44.     <mx:DateChooser id="dc1"
  45.         showToday="false"
  46.         creationComplete="displayDates();"/>
  47.     
  48. </s:Application>





例如 限定选择区域为从以前到今天
  1. caidatatime.selectableRange  ={rangeEnd: new Date()};


指定日期的数据格式  使用formatString 属性  指定日期格式 "MM", "DD", "YY", “YYYY”    默认为 "MM/DD/YYYY". 请看下面例子 选择下拉框指定日期格式。
  1. <?xml version="1.0"?>
  2. <!-- controls\date\DateFieldFormat.mxml -->
  3. <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
  4.     xmlns:s="library://ns.adobe.com/flex/spark"
  5.     xmlns:mx="library://ns.adobe.com/flex/mx">
  6.     
  7.     <mx:HBox>
  8.         <mx:ComboBox id="cb1">
  9.             <mx:ArrayCollection>
  10.                 <fx:String>MM/DD/YY</fx:String>
  11.                 <fx:String>MM/DD/YYYY</fx:String>
  12.                 <fx:String>DD/MM/YY</fx:String>
  13.                 <fx:String>DD/MM/YYYY</fx:String>
  14.                 <fx:String>DD MM, YYYY</fx:String>
  15.             </mx:ArrayCollection>    
  16.         </mx:ComboBox>
  17.     
  18.         <mx:DateField id="date2"
  19.             editable="true"
  20.             width="100"
  21.             formatString="{cb1.selectedItem}"/>      
  22.     </mx:HBox>        
  23. </s:Application>




同样可以使用 labelFunction 属性 指定格式化的函数。下面例子 使用formatDate() 来格式化
  1. <?xml version="1.0"?>
  2. <!-- controls\date\DateChooserFormatter.mxml -->
  3. <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
  4.     xmlns:s="library://ns.adobe.com/flex/spark"
  5.     xmlns:mx="library://ns.adobe.com/flex/mx">
  6.     <fx:Script>
  7.         <![CDATA[
  8.             private function formatDate(date:Date):String {
  9.                 return dfconv.format(date);
  10.             }      
  11.         ]]>
  12.     </fx:Script>
  13.     <fx:Declarations>
  14.         <mx:DateFormatter id="dfconv" formatString="YYYY/MM/DD"/>
  15.     </fx:Declarations>
  16.     
  17.     <mx:DateField id="df" labelFunction="formatDate" parseFunction="{null}"/>
  18. </s:Application>




labelFunction 属性 可以指定 是否允许用户在输入框中输入日期  parseFunction 的值设置为 null 即不允许输入

键盘操作 

Left Arrow
Moves the selected date to the previous enabled day in the month. Does not move to the previous month.

Right Arrow
Moves the selected date to the next enabled day in the month. Does not move to the next month.

Up Arrow
Moves the selected date up the current day of week column to the previous enabled day. Does not move to the previous month.

Down Arrow
Moves the selected date down the current day of week column to next enabled day. Does not move to the next month.

Page Up
Displays the calendar for the previous month.

Page Down
Displays the calendar for the next month.

Home
Moves the selection to the first enabled day of the month.

End
Moves the selection to the last enabled day of the month.

+
Move to the next year.

-
Move to the previous year.

Control+Down Arrow
DateField only: open the DateChooser control.

Control+Up Arrow
DateField only: close the DateChooser control.

Escape
DateField only: cancel operation.

Enter
DateField only: selects the date and closes the DateChooser control.

Note: The user must select the control before using navigation keystrokes. In a DateField control, all listed keystrokes work only when the date chooser is displayed.
快速回复
限100 字节
如果您提交过一次失败了,可以用”恢复数据”来恢复帖子内容
 
上一个 下一个