2.11.使用Calendar控件
2.11.1. 问题
你想要允许用户在一个日历样式的控件中选择日期。
2.11.2. 解决办法
使用DateField 控件或DataChooser 控件让用户选择日期。
2.11.3. 讨论
Flex 框架提供了两个控件用来实现日历样式的功能：DateField 和DateChooser 控件。DateField控件提供了一个TextInput 控件和一个点击可以打开日历的日历图标。DateChooser，则不同，它提供了一个可视的日历给用户操作。下列范例是一个简单的旅程计算器用来展示两种类型的控件。用户使用DateField 选择开始日期，使用DateChooser 选择结束日期。程序会在控件的change 事件触发update 事件处理函数中计算旅途持续时间。两个控件的selectedDate属性会返回用户选择的Date 对象。
在日期运算中，使用Date 对象的getTime 方法是非常重要的，以便正确处理闰年。getTime方法返回从1970 年1 月1 日起流逝的毫秒数。
你想要允许用户在一个日历样式的控件中选择日期。
2.11.2. 解决办法
使用DateField 控件或DataChooser 控件让用户选择日期。
2.11.3. 讨论
Flex 框架提供了两个控件用来实现日历样式的功能：DateField 和DateChooser 控件。DateField控件提供了一个TextInput 控件和一个点击可以打开日历的日历图标。DateChooser，则不同，它提供了一个可视的日历给用户操作。下列范例是一个简单的旅程计算器用来展示两种类型的控件。用户使用DateField 选择开始日期，使用DateChooser 选择结束日期。程序会在控件的change 事件触发update 事件处理函数中计算旅途持续时间。两个控件的selectedDate属性会返回用户选择的Date 对象。
+展开
-XML
<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();
}c
catch(ex:Error) {
}
}
]]>
</mx:Script>
</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();
}c
catch(ex:Error) {
}
}
]]>
</mx:Script>
</mx:Application>
在日期运算中，使用Date 对象的getTime 方法是非常重要的，以便正确处理闰年。getTime方法返回从1970 年1 月1 日起流逝的毫秒数。
加支付宝好友偷能量挖...
