DataChooser、DataFiled

最新推荐文章于 2013-12-30 23:23:00 发布

conqueror119

最新推荐文章于 2013-12-30 23:23:00 发布

阅读量272

点赞数

文章标签： Flex Adobe XML Access

本文链接：https://blog.youkuaiyun.com/conqueror119/article/details/83772933

版权

本文介绍了Flex中的DataChooser和DataField组件的使用方法，包括创建DataChooser对象、使用Date类设置默认日期及指定文本样式等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

DataChooser和DataField控件是MX组件集的一部分，暂时没有具有相当功能的Spark组件。

DataChooser和DataField使得用户可以从图形日历中选择日期。DataChooser控件的用户界面是一个日历，而DataField则由一个text域和小图标组成，点击小图标会出现图形化的日历，选择日期的结果将会放在text域中。DataFiled的属性是DataChooser的属性的超集。

1、创建DataChooser 对象

<?xml version="1.0"?>
<!-- controls\date\DateChooserEvent.mxml -->
<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.getFullYear() 
					+"-" + (eventObj.currentTarget.selectedDate.getMonth() + 1) + "-"
						+  eventObj.currentTarget.selectedDate.getDate();
			}
		]]>
	</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>

2、使用Date类：

<?xml version="1.0"?>
<!-- controls\date\DateChooserStyles.mxml -->
<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 id="date1"> 
		<mx:selectedDate> 
			<!--设置默认的选择的日期-->
			<fx:Date month="3" date="10" fullYear="2005"/> 
		</mx:selectedDate> 
	</mx:DateChooser>  
</s:Application>

<mx:DateField id="date3" selectedDate="{new Date (2005, 3, 10)}"/>

<fx:Script> 
    <![CDATA[ 
        private function initDC():void { 
            date2.selectedDate=new Date (2005, 3, 10);         
        } 
    ]]> 
</fx:Script>

3、指定header、weekday、today‘s day 的文本样式

<?xml version="1.0"?>
<!-- controls\date\DateChooserStyles.mxml -->
<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>

官方网址：http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf69084-7d9b.html