Flex 日期选择器控件

时间：2023-12-03 14:25:38

在构建用户界面时，经常用到日期的输入和选择。

输入日期时，用户可以使用键盘输入，也可以在类似于日历的弹出式对话框中，通过鼠标单击所选日期。

在Flex中可以通过日期输入控件实现输入和选择日期。Flex内置了两种日期输入控件:日期选择器控件(DateChooser Control)和日期区域控件(DateField Control).

   一、日期选择器控件（DateChooser Control）

       Flex 日期选择器控件

      日期选择器控件类似于日历。利用年、月、日和星期来表示一个日期。该控件，即可以选择日期，也可以根据需求限制日期的选择范围，或者禁止选择某一特殊日期。选择日期后，还可以单击已选择日期取消选定。

     对应的MXML标签为<mx:DateChooser>.

   1  常用属性：           Flex 日期选择器控件

注意：日期选择器控件中的月份是从0开始计算的，所以2006.0.23表示2006年1月23日。

2.事件

用户与空间交互时，可触发两种事件

change：改变选择日期时会触发change事件。事件对象：mx.event.Calendar LayoutChangeEvent.

scroll:在控件上改变月份时会触发scroll事件。事件对象：mx.event.DateChooserEvent .

3.创建日期选择器控件

 <?xml version="1.0" encoding="utf-8"?>

 <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"

                        xmlns:s="library://ns.adobe.com/flex/spark"

                        xmlns:mx="library://ns.adobe.com/flex/mx">

     <fx:Declarations>

         <!-- 将非可视元素（例如服务、值对象）放在此处 -->

     </fx:Declarations>

     <fx:Script>

         <![CDATA[

             import mx.controls.Alert;

             import mx.events.CalendarLayoutChangeEvent;

             import mx.events.DateChooserEvent;

             //定义改变选择日期时发生的事件，在文本控件中显示当前选择的日期

             public function changeDate(event:CalendarLayoutChangeEvent):void{

             var showDate:String = event.currentTarget.selectedDate.getFullYear() + "年"

                 + event.currentTarget.selectedDate.getMonth() + "月" +

                 event.currentTarget.selectedDate.getDay()+"日";

                 showDateText.text = showDate;

             }

             //定义改变当前显示月份时发生的事件

             private function changeMonth(event:DateChooserEvent):void{

               mx.controls.Alert.show(event.detail);

             }

         ]]>

     </fx:Script>

     <mx:Panel title="日期选择器控件" width="239" height="273" layout="vertical" horizontalAlign="center">

         <!-- 控件定义，选择日期从2006年1月1日到2007年9月15日，月份从0开始计数-->

         <mx:DateChooser id="date1"

             selectableRange="{{rangeStart:new Date(2006,0,1),rangeEnd:new Date(2007,9,15)}}"

             scroll="changeMonth(event)"

             change = "changeDate(event)">

         </mx:DateChooser>

         <mx:Text id="showDateText" width="174" height="24"/>

     </mx:Panel>

 </s:WindowedApplication>

相关文章