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 以来的毫秒数。