Flex 3 cookbook翻译: 2.11 使用来自Calendar控件的日期

 

2.11 使用来自 Calendar 控件的日期

2.11.1 问题

你想让用户从一个日历样式的控件中选择日期。

2.11.2 解答

使用 DataField 控件或者 DateChooser 控件为用户提供便捷的日历样式的控件去选取日期。

2.11.3 讨论

Flex 框架为日历功能提供了两个控件： DateField 和 DateChooser 。 DateField 提供了一个文本输入框和一个日历图标，单击图标会打开一个日历。另一方面， DateChooser 为用户一直显示一个日历。下面的例子是一个简单的旅程计时器，用到了这两种类型的控件。用户用 DateField 选择一个起始日期，而结束日期用 DateChooser. 程序通过控件的 change 事件，在 update 这个事件处理器中计算出旅行持续的时间。两个控件的 selectedDate 属性都会根据用户的选择返回一个日期对象。

 

<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="vertical">

    <mx:Form>
        <mx:FormHeading label="Trip Calculator"/>
        <mx:FormItem label="Start Date">
            <mx:DateField id="startDate" change="update(event)"/>
        </mx:FormItem>
        <mx:FormItem label="End Date">
            <mx:DateChooser id="endDate" change="update(event)"/>
        </mx:FormItem>
        <mx:FormItem label="Trip Duration (days)">
            <mx:Label id="display"/>
        </mx:FormItem>
    </mx:Form>

    <mx:Script>
        <![CDATA[
            import mx.events.CalendarLayoutChangeEvent;

            private static const MILLISECONDS:int = 1000;
            private static const SECONDS:int = 60;
            private static const MINUTES:int = 60;
            private static const HOURS:int = 24;


            private function update(evt:CalendarLayoutChangeEvent):void {
                try {
                    var diff:Number = endDate.selectedDate.getTime() -
startDate.selectedDate.getTime();
                    // convert the millisecond into days
                    var days:int = int(diff/(MILLISECONDS*SECONDS*MINUTES*HOURS));
                    display.text = days.toString();
                }
                catch(ex:Error) {

                }
            }

        ]]>
    </mx:Script>
</mx:Application>

 

当执行日期计算时，用 Date 对象的 getTime 方法是很重要的，以便让跨年能正确地被分解。 getTimer 方法返回从 1970.1.1 以来的毫秒数。