Flex － 用于选择时间范围的组件

在组件中对开始、结束日期进行了限制，不用人为判断：

1、开始日期不能晚于当前日期

2、结束日期不能早于开始日期，不能晚于当前日期

 

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
      height="24" width="100%"   fontSize="12">
  <mx:Script>
   <![CDATA[
  
    import mx.controls.DateField; 
    [Bindable] 
    private var today:Date = new Date(new Date().setHours(0,0,0,0)); 
    [Bindable] 
    private var start:Date = today; 
    [Bindable] 
    private var end:Date = start; 
   
     /*DateChange*/ 
    private function onDateChangeHandler(event:Event):void 
    { 
       if(startDF.text == "") 
        { 
          startDF.selectedDate = start; 
        } 
        else 
        { 
          start = startDF.selectedDate;         
        } 
       if(endDF.text == "") 
        { 
          endDF.selectedDate = this.end; 
        } 
        else 
        { 
          this.end = endDF.selectedDate; 
        } 
     }  
     // 获取值
    public function getStartDateValue():String
    {
     return startDF.text;
    }
     // 获取值
    public function getEndDateValue():String
    {
     return endDF.text;
    }
 ]]>
  </mx:Script> 
  <mx:HBox>
   <mx:Label id ="lbl1" text="开始日期:" />
  <mx:DateField id="startDF"    fontSize="12"
   dayNames="[日,一,二,三,四,五,六]" 
  monthNames="[一月,二月,三月,四月,五月,六月,七月,八月,九月,十月,十一月,十二月]"
  showToday="true" yearNavigationEnabled="true"
  selectedDate="{start}" formatString="YYYY-MM-DD" 
     selectableRange="{{rangeEnd:end}}" change="onDateChangeHandler(event)"  />
    <mx:Label id="lbl2" text="结束日期:"/> 
    <mx:DateField id="endDF" fontSize="12"
     dayNames="[日,一,二,三,四,五,六]" 
  monthNames="[一月,二月,三月,四月,五月,六月,七月,八月,九月,十月,十一月,十二月]"
  showToday="true" yearNavigationEnabled="true"
  selectedDate="{end}" formatString="YYYY-MM-DD" 
      selectableRange="{{rangeStart:start,rangeEnd:today}}" change="onDateChangeHandler(event)"/>
  </mx:HBox>
 
</mx:Canvas>