2.11.使用Calendar控件

2024-04-27 13:51:46

字體：大中小

供稿：網(wǎng)友

2.11.1. 問題
你想要允許用戶在一個(gè)日歷樣式的控件中選擇日期。
2.11.2. 解決辦法
使用DateField 控件或DataChooser 控件讓用戶選擇日期。
2.11.3. 討論
Flex 框架提供了兩個(gè)控件用來實(shí)現(xiàn)日歷樣式的功能：DateField 和DateChooser 控件。DateField控件提供了一個(gè)TextInput 控件和一個(gè)點(diǎn)擊可以打開日歷的日歷圖標(biāo)。DateChooser，則不同，它提供了一個(gè)可視的日歷給用戶操作。下列范例是一個(gè)簡單的旅程計(jì)算器用來展示兩種類型的控件。用戶使用DateField 選擇開始日期，使用DateChooser 選擇結(jié)束日期。程序會(huì)在控件的change 事件觸發(fā)update 事件處理函數(shù)中計(jì)算旅途持續(xù)時(shí)間。兩個(gè)控件的selectedDate屬性會(huì)返回用戶選擇的Date 對(duì)象。

-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>