Flex的DataChooser和DateField控件

简介

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

 

创建DataChooser控件或DateField控件

   < mx:Script >
      import mx.events.CalendarLayoutChangeEvent;
    private function useDate(eventObj:CalendarLayoutChangeEvent):void {
      // Make sure selectedDate is not null.
      if (eventObj.currentTarget.selectedDate == null) {
        return
      }
      //Access the Date object from the event object.
      day.text=eventObj.currentTarget.selectedDate.getDay();
      date.text=eventObj.currentTarget.selectedDate.getDate();
      month.text=eventObj.currentTarget.selectedDate.getMonth() + 1;
      year.text=eventObj.currentTarget.selectedDate.getFullYear();
      wholeDate.text= (eventObj.currentTarget.selectedDate.getMonth() + 1) +"/" + (eventObj.currentTarget.selectedDate.getDate() +"/" + eventObj.currentTarget.selectedDate.getFullYear());
    }
  ]]>
   mx:Script >
   < mx:DateChooser id ="date1" change ="useDate(event)" />
   < mx:Form >
     < mx:FormItem label ="Day of week" >
       < 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 ="100" />
     mx:FormItem >
   mx:Form >

注意，对于selectedDate属性的检查是必须的，因为当按下Ctrl键的同时点击当前选择的日期，将会导致selectedDate属性被设置为null，并调度change事件。

 

使用Date类

DateChooser和DateField控件使用selectedDate属性来存储Date类型的当前被选择的日期。你可以创建日期对象来表示日期和时间，或者访问在selectedDate属性中的Date对象。

 

Date类有许多你可以用来操作日期的方法。

 

在MXML中，你可以通过标签创建并配置一个Date对象。这个标签将Date类的setter方法暴露为MXML属性，所以你可以依此初始化一个Date对象。

 

   < mx:DateChooser id ="date1" >
     < mx:selectedDate >
       < mx:Date month ="3" date ="10" fullYear ="2005" />
     mx:selectedDate >
   mx:DateChooser >

 

也可以在一个内嵌的ActionScript代码段中初始化被选择的日期

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

 

或者在一个函数中设定selectedDate属性

private function initDC():void {
  date2.selectedDate=new Date (2005, 3, 10);
}