flex DataTimePicker时间控件

 

两种DatatimePicker：

1.DatatimePicker.mxml:

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml " paddingBottom="2" paddingLeft="2" paddingRight="2" paddingTop="2" horizontalGap="0" verticalAlign="middle">
 <mx:DateField id="date" selectedDate="{new Date()}"/>
 <mx:NumericStepper id="hours" value="12" minimum="0" maximum="23" stepSize="1" textAlign="center" width="50"/>
 <mx:Label text=":" textAlign="center" width="10"/>
 <mx:NumericStepper id="minutes" minimum="0"  maximum="59" stepSize="1" textAlign="center" width="50"/>
 <mx:Label text=":" textAlign="center" width="10"/>
 <mx:NumericStepper id="second" minimum="0"  maximum="59" stepSize="1" textAlign="center" width="50"/>
</mx:HBox>

测试：在另一个mxml文件里加入<component:DateTimePicker id="startTimePicker" />

var startDate:Date = startTimePicker.date.selectedDate;

startTime = (new Date(startDate.getFullYear(),startDate.getMonth(),startDate.getDate(),startTimePicker.hours.value,startTimePicker.minutes.value,startTimePicker.second.value)).valueOf()/1000;

2。 DatatimePicker.mxml：

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml " preinitialize="preInit()" resize="onResize()" creationComplete="onCreateComplete()">
 <mx:Metadata>
  [Event(name="change", type="flash.events.Event")]
 </mx:Metadata>
 <mx:HBox horizontalGap="3" verticalAlign="middle" initialize="onInit()">
  <mx:DateField id="theDate" labelFunction="toLabel" change="dateChange()"/>
  <mx:NumericStepper minimum="-1" maximum="24" stepSize="1" maxChars="2" id="theHour" change="hourChange()"/>
  <mx:Label text="时"/>
  <mx:NumericStepper minimum="-1" maximum="60" stepSize="1" maxChars="2" id="theMinute" change="minuteChange()"/>
  <mx:Label text="分"/>
 </mx:HBox>
 <mx:Script>
  <![CDATA[
   import mx.formatters.*;
   import mx.controls.*;
   import mx.core.mx_internal;
   private function onResize():void {
    if(theDate.width<=0 && this.width==this.measuredWidth) {
     return;
    }
    if(this.width>0 && this.measuredWidth>0) {
     theDate.width+=this.width-this.measuredWidth;
    }
   }
   private var formatter:DateFormatter;
   private function preInit():void {
    formatter=new DateFormatter();
    formatter.formatString="YYYY-MM-DD JJ:NN";
   }
   private function onInit():void {
    if(theHour!=null) {
     var input:TextInput=theHour.mx_internal::inputField;
     if(input!=null) {
      input.addEventListener("textChanged",patchText);
      input.addEventListener(Event.CHANGE,patchText);
     }
    }
    if(theMinute!=null) {
     input=theMinute.mx_internal::inputField;
     if(input!=null) {
      input.addEventListener("textChanged",patchText);
      input.addEventListener(Event.CHANGE,patchText);
     }
    }
   }
   private function onCreateComplete():void {
    onResize();
    this.date=new Date();
   }
   private function patchText(e:Event):void {
    var input:TextInput=e.target as TextInput;
    if(input!=null) {
     var s:String=input.text;
     if(s.length<2) {
      input.text="0"+s;
     }
    }
   }
   private function toLabel(currentDate:Date):String {
    if(theHour!=null && theHour.value!=this.date.getHours()) {     
     theHour.value=this.date.getHours();
    }
    if(theMinute!=null && theMinute.value!=this.date.getMinutes()) {
     theMinute.value=this.date.getMinutes();
    }
    return formatter.format(this.date);    
   }
   private var _date:Date=new Date();
   private function get date():Date {
    return _date;
   }
   private function set date(val:Date):void {
    this._date=val;
    if(this.theDate!=null) {
     this.theDate.selectedDate=this._date;
    }
    val.seconds=0;
    val.milliseconds=0;
    this.selDate=new Date(val.getTime());
    dispatchEvent(new Event(Event.CHANGE));    
   }
   private function minuteChange():void {
    var n:Number=theMinute.value;
    var date:Date=this.date;
    if(n==-1) {
     date.hours=date.hours-1;
     date.minutes=59;
     this.date=date;
    } else if(n==60) {
     date.hours=date.hours+1;
     date.minutes=0;
     this.date=date;
    } else {     
     if(date.getMinutes()!=n) {
      date.minutes=n;
      this.date=date;
     }
    }
   }
   private function hourChange():void {
    var n:Number=theHour.value;
    var date:Date=this.date;
    if(n==-1) {
     date.date=date.date-1;
     date.hours=23;
     this.date=date;
    } else if(n==24) {
     date.date=date.date+1;
     date.hours=0;
     this.date=date;
    } else {
     if(date.getHours()!=n) {
      date.hours=n;
      this.date=date;
     }
    }
   }
   private function dateChange():void {
    var date:Date=this.date;
    var d:Date=theDate.selectedDate;
    if(d!=null && (date.fullYear!=d.fullYear || date.month!=d.month || date.date!=d.date)) {
     date.fullYear=d.fullYear;
     date.month=d.month;
     date.date=d.date;
     this.date=date;
    }
   }
   [Bindable]
   private var _selDate:Date;
   public function get selDate():Date {
    return _selDate;
   }
   [Bindable]
   public function set selDate(val:Date):void {
    this._selDate=val;
    if(val.getTime()!=this.date.getTime()) {
     this.date=val;
    }
   }
  ]]>
 </mx:Script> 
</mx:Canvas>
<!--StartFragment -->