flex 日期控件

转载于 2013-09-10 17:38:06 发布

· 3.2k 阅读

文章标签：

#air

Flex 专栏收录该内容

14 篇文章

订阅专栏

来源：原创
来源链接：http://help.adobe.com/zh_CN/flex/using/WS2db454920e96a9e51e63e3d11c0bf69084-7d9b.html
编程环境：FlashBuilder4
是否解决：已解决
作品案例类别：否
组件或控件：是

官方教程 http://help.adobe.com/zh_CN/flex/using/WS2db454920e96a9e51e63e3d11c0bf69084-7d9b.html
http://help.adobe.com/zh_CN/AS3LCR/Flex_4.0/mx/controls/DateField.html#displayedMonth

DateChooser 控件

DateField 控件比上面多了文本输入框

通过下面这个例子简要介绍一下

复制代码

<?xml version="1.0"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx: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());
}
]]>
</fx:Script>
<mx:DateChooser id="date1" change="useDate(event)"/>
<mx:Form x="200">
<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>
</s:Application>

其中属性 selectedDate.getDay()为得到一星期的第几天，selectedDate.getDate(); selectedDate.getMonth() + 1; selectedDate.getFullYear(); 依次为得到日，月，年

注意月需要+1 因为系统设定一月为0，十二月为11。还有按住ctrl键可以取消选择日期

下面介绍一下如何修改控件的样式

headerStyleName
weekDayStyleName
todayStyleName

复制代码

<?xml version="1.0"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Style>
.myHeaderStyle{
color:#6666CC;
font-family:Times New Roman, Times, serif;
font-size:16px; font-weight:bold;}
.myTodayStyle{
color:#CC6633;
font-family:Times New Roman, Times, serif;
font-size:12px; font-weight:bold;}
.myDayStyle{
color:#006600;
font-family:Courier New, Courier, mono;
font-size:15px; font-style:italic; font-weight:bold;}
</fx:Style>
<mx:DateChooser
headerStyleName="myHeaderStyle"
todayStyleName="myTodayStyle"
todayColor="#CCCCCC"
weekDayStyleName="myDayStyle"/>
</s:Application>

下面介绍一下如何指定可选择的区域
[pre]disabledDays 指定不可选择的某个星期几的数组
disabledRange 指定不可选择的某天的数组
selectableRange 指定可选择的某天的数组

复制代码

<?xml version="1.0"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<mx:DateChooser
selectableRange="{{rangeStart: new Date(2006,0,1),
rangeEnd: new Date(2006,2,15)}}"
disabledRanges="{[new Date(2006,0,11),
{rangeStart: new Date(2006,0,23), rangeEnd: new Date(2006,1,10)}]}"
disabledDays="{[0,6]}"/>
</s:Application>

通过mxml标签限定选择区域

复制代码

<?xml version="1.0"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<mx:DateField>
<mx:disabledDays>
<fx:Number>0</fx:Number>
<fx:Number>6</fx:Number>
</mx:disabledDays>
</mx:DateField>
<mx:DateField disabledDays="[0,6]"/>
</s:Application>

下面通过初始化函数改变日期的颜色和表头

复制代码

<?xml version="1.0"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
<![CDATA[
import mx.events.DateChooserEvent;
private function dateChooser_init():void {
myDC.dayNames=['Sun', 'Mon', 'Tue',
'Wed', 'Th', 'Fri', 'Sat'];
myDC.firstDayOfWeek = 3;
myDC.setStyle("headerColor", 0xff0000);
myDC.selectableRange = {rangeStart: new Date(2009,0,1),
rangeEnd: new Date(2012,0,10)};
}
private function onScroll():void {
myDC.setStyle("fontStyle", "italic");
}
]]>
</fx:Script>
<mx:DateChooser id="myDC"
width="200"
creationComplete="dateChooser_init();"
scroll="onScroll();"/>
</s:Application>

selectableRange 属性介绍下面的代码创建了2个日期的类 rangeStart:cDate, rangeEnd:cDate，开始和结束日期。数据来源为XML id="shows"

复制代码

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
creationComplete="init()">
<fx:Script>
<![CDATA[
private function init():void {
dc1.displayedMonth = 1;
dc1.displayedYear = 2008;
}
public function displayDates():void {
var dateRanges:Array = [];
for (var i:int=0; i<shows.show.length(); i++) {
var cDate:Date =
new Date(shows.show.showDate.toString());
var cDateObject:Object =
{rangeStart:cDate, rangeEnd:cDate};
dateRanges.push(cDateObject);
}
dc1.selectedRanges = dateRanges;
}
]]>
</fx:Script>
<fx:Declarations>
<fx:XML id="shows" format="e4x">
<data>
<show>
<showID>1</showID>
<showDate>02/28/2008</showDate>
<showTime>10:45am/11:15am</showTime>
</show>
<show>
<showID>2</showID>
<showDate>02/23/2008</showDate>
<showTime>7:00pm</showTime>
</show>
</data>
</fx:XML>
</fx:Declarations>
<mx:DateChooser id="dc1"
showToday="false"
creationComplete="displayDates();"/>
</s:Application>

例如限定选择区域为从以前到今天

复制代码

caidatatime.selectableRange ={rangeEnd: new Date()};

指定日期的数据格式使用formatString 属性指定日期格式 "MM", "DD", "YY", “YYYY” 默认为 "MM/DD/YYYY". 请看下面例子选择下拉框指定日期格式。

复制代码

<?xml version="1.0"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<mx:HBox>
<mx:ComboBox id="cb1">
<mx:ArrayCollection>
<fx:String>MM/DD/YY</fx:String>
<fx:String>MM/DD/YYYY</fx:String>
<fx:String>DD/MM/YY</fx:String>
<fx:String>DD/MM/YYYY</fx:String>
<fx:String>DD MM, YYYY</fx:String>
</mx:ArrayCollection>
</mx:ComboBox>
<mx:DateField id="date2"
editable="true"
width="100"
formatString="{cb1.selectedItem}"/>
</mx:HBox>
</s:Application>

同样可以使用 labelFunction 属性指定格式化的函数。下面例子使用 formatDate() 来格式化

复制代码

<?xml version="1.0"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
<![CDATA[
private function formatDate(date:Date):String {
return dfconv.format(date);
}
]]>
</fx:Script>
<fx:Declarations>
<mx:DateFormatter id="dfconv" formatString="YYYY/MM/DD"/>
</fx:Declarations>
<mx:DateField id="df" labelFunction="formatDate" parseFunction="{null}"/>
</s:Application>

labelFunction 属性可以指定是否允许用户在输入框中输入日期 parseFunction 的值设置为 null 即不允许输入

键盘操作

Left Arrow
Moves the selected date to the previous enabled day in the month. Does not move to the previous month.

Right Arrow
Moves the selected date to the next enabled day in the month. Does not move to the next month.

Up Arrow
Moves the selected date up the current day of week column to the previous enabled day. Does not move to the previous month.

Down Arrow
Moves the selected date down the current day of week column to next enabled day. Does not move to the next month.

Page Up
Displays the calendar for the previous month.

Page Down
Displays the calendar for the next month.

Home
Moves the selection to the first enabled day of the month.

End
Moves the selection to the last enabled day of the month.

+
Move to the next year.

-
Move to the previous year.

Control+Down Arrow
DateField only: open the DateChooser control.

Control+Up Arrow
DateField only: close the DateChooser control.

Escape
DateField only: cancel operation.

Enter
DateField only: selects the date and closes the DateChooser control.

Note: The user must select the control before using navigation keystrokes. In a DateField control, all listed keystrokes work only when the date chooser is displayed.

http://www.freair.com/bbs/read.php?tid=152