简介
DataChooser和DataField控件可以让用户在图形化日历中选择日期。DateChooser控件的用户界面是日立。DateField控件有一个文本框,使用在弹出的日期选择器中选择的日期作为结果。DateField控件的属性集市DateChooser控件属性集的超集。
创建DataChooser控件或DateField控件
<
mx:Script
>
<![CDATA[
import mx.events.CalendarLayoutChangeEvent;
private function useDate(eventObj:CalendarLayoutChangeEvent):void {
// Make sure selectedDate is not null.
if (eventObj.currentTarget.selectedDate == null) {
return
}
//Access the Date object from the event object.
day.text=eventObj.currentTarget.selectedDate.getDay();
date.text=eventObj.currentTarget.selectedDate.getDate();
month.text=eventObj.currentTarget.selectedDate.getMonth() + 1;
year.text=eventObj.currentTarget.selectedDate.getFullYear();
wholeDate.text= (eventObj.currentTarget.selectedDate.getMonth() + 1) +"/" + (eventObj.currentTarget.selectedDate.getDate() +"/" + eventObj.currentTarget.selectedDate.getFullYear());
}
]]>
</ mx:Script >
< mx:DateChooser id ="date1" change ="useDate(event)" />
< mx:Form >
< mx:FormItem label ="Day of week" >
< mx:TextInput id ="day" width ="100" />
</ mx:FormItem >
< mx:FormItem label ="Day of month" >
< mx:TextInput id ="date" width ="100" />
</ mx:FormItem >
< mx:FormItem label ="Month" >
< mx:TextInput id ="month" width ="100" />
</ mx:FormItem >
< mx:FormItem label ="Year" >
< mx:TextInput id ="year" width ="100" />
</ mx:FormItem >
< mx:FormItem label ="Date" >
< mx:TextInput id ="wholeDate" width ="100" />
</ mx:FormItem >
</ mx:Form >
<![CDATA[
import mx.events.CalendarLayoutChangeEvent;
private function useDate(eventObj:CalendarLayoutChangeEvent):void {
// Make sure selectedDate is not null.
if (eventObj.currentTarget.selectedDate == null) {
return
}
//Access the Date object from the event object.
day.text=eventObj.currentTarget.selectedDate.getDay();
date.text=eventObj.currentTarget.selectedDate.getDate();
month.text=eventObj.currentTarget.selectedDate.getMonth() + 1;
year.text=eventObj.currentTarget.selectedDate.getFullYear();
wholeDate.text= (eventObj.currentTarget.selectedDate.getMonth() + 1) +"/" + (eventObj.currentTarget.selectedDate.getDate() +"/" + eventObj.currentTarget.selectedDate.getFullYear());
}
]]>
</ mx:Script >
< mx:DateChooser id ="date1" change ="useDate(event)" />
< mx:Form >
< mx:FormItem label ="Day of week" >
< mx:TextInput id ="day" width ="100" />
</ mx:FormItem >
< mx:FormItem label ="Day of month" >
< mx:TextInput id ="date" width ="100" />
</ mx:FormItem >
< mx:FormItem label ="Month" >
< mx:TextInput id ="month" width ="100" />
</ mx:FormItem >
< mx:FormItem label ="Year" >
< mx:TextInput id ="year" width ="100" />
</ mx:FormItem >
< mx:FormItem label ="Date" >
< mx:TextInput id ="wholeDate" width ="100" />
</ mx:FormItem >
</ mx:Form >
注意,对于selectedDate属性的检查是必须的,因为当按下Ctrl键的同时点击当前选择的日期,将会导致selectedDate属性被设置为null,并调度change事件。
使用Date类
DateChooser和DateField控件使用selectedDate属性来存储Date类型的当前被选择的日期。你可以创建日期对象来表示日期和时间,或者访问在selectedDate属性中的Date对象。
Date类有许多你可以用来操作日期的方法。
在MXML中,你可以通过<mx:Date>标签创建并配置一个Date对象。这个标签将Date类的setter方法暴露为MXML属性,所以你可以依此初始化一个Date对象。
<
mx:DateChooser
id
="date1"
>
< mx:selectedDate >
< mx:Date month ="3" date ="10" fullYear ="2005" />
</ mx:selectedDate >
</ mx:DateChooser >
< mx:selectedDate >
< mx:Date month ="3" date ="10" fullYear ="2005" />
</ mx:selectedDate >
</ mx:DateChooser >
也可以在一个内嵌的ActionScript代码段中初始化被选择的日期
<
mx:DateField
id
="date3"
selectedDate
="{new Date (2005, 3, 10)}"
/>
或者在一个函数中设定selectedDate属性
private function initDC():void {
date2.selectedDate=new Date (2005, 3, 10);
}
date2.selectedDate=new Date (2005, 3, 10);
}
转载于:https://blog.51cto.com/flexria/154026