2.11.使用Calendar控件

2024-04-27 13:51:46

字體：大中小

來源：轉載

供稿：網友

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