日期控件的使用

一、日期选择器控件（DateChooser Control）

      1、dayNames：定义星期的名字。

      2、monthNames：定义月份的名称。

      3、disabledDays：指明一周中不能选择的日期。选择范围为0-6。

      4、yearNavigationEnabled：是否可选择年份。

      5、selectedDate：控件最初的选择日期。

      6、disabledRanges：指定不能选择的日期。

      7、selectedRanges：可选择的日期范围。

      8、showToday：是否高亮当前日期（今天）。默认为true。

      9、displayedMonth：控件初始化时高亮选择的月份。

      10、displayedYear：控件初始化时高亮选择的年份。

      11、maxYear：最大能选择的年份。默认为2100。

      12、minYear：最小能选择的年份。默认为1900。

 

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:Script>
		<![CDATA[
			import mx.events.CalendarLayoutChangeEvent;
			import mx.events.DateChooserEvent;
			
			//改变年份、月份时触发该事件
			//detail的取值：previousMonth、nextMonth、previousYear、nextYear
			private function scrollEvent(event:DateChooserEvent):void{
				txt2.text = event.detail;
			}
			
			//改变日期时触发该事件
			private function changeEvent(event:CalendarLayoutChangeEvent):void{
				var date:Date = event.currentTarget.selectedDate as Date;
				var s:String = date.fullYear + "-" + (date.month+1) + "-" + date.date;
				txt1.text = s;
			}
		]]>
	</mx:Script>
	
	<mx:Panel x="10" y="10" width="391" height="340" layout="absolute" title="日期选择器控件" fontSize="12">
		<mx:DateChooser x="10" y="10" 
			id="date1"
			dayNames="['日','一','二','三','四','五','六']"
			monthNames="['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月']"
			disabledDays="[0,6]"
			yearNavigationEnabled="true"
			selectedDate="{new Date(2009,5,11)}"
			disabledRanges="{[{rangeStart:new Date(2009,5,1), rangeEnd: new Date(2009,5,10)}]}"
			maxYear="2009"
			scroll="scrollEvent(event)"
			change="changeEvent(event)"/>
			
		<mx:TextInput x="10" y="219" width="182" id="txt1" editable="false"/>
		<mx:TextInput x="10" y="251" width="182" id="txt2" editable="false"/>
	</mx:Panel>
	
</mx:Application>

 

 

二、日期区域控件（DateField Control）

      1、formatString：日期格式。默认为：MM/DD/YYYY。

      2、labelFunction：通过指定的方法格式化选择的日期。

      3、parseFunction：通过指定的方法格式化输入的日期字符串。

 

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:Script>
		<![CDATA[
			//通过指定的方法格式化选择的日期
			private function labelFunc(currentDate: Date):String{
				return formatter.format(currentDate);
			}
			
			//通过指定的方法格式化输入的日期字符串
			private function parseFunc(valueString:String, inputFormat:String):String{
				//return formatter.format(Date.parse(valueString));
				return null;
			}
		]]>
	</mx:Script>
	
	<mx:DateFormatter id="formatter" formatString="YYYY年MM月DD日"/>

	<mx:DateField x="435" y="10" width="146" fontSize="12" id="date2"
		dayNames="['日','一','二','三','四','五','六']"
		monthNames="['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月']"
		yearNavigationEnabled="true"
		formatString="YYYY-MM-DD"
		labelFunction="labelFunc"
		parseFunction="parseFunc"
		editable="false"
		/>
	
</mx:Application>