Flex - 自定义日期选择组件（可选择周）

2014-11-25 发布：hangge 阅读：2860

Flex自带的日期选择控件是按天选择，如果想要实现按周选择的话，稍加改造即可。效果图如下：

实现原理：选择某一天后，计算这天所在周的第一天和最后一天的日期。同时通过DateChooser的selectedRanges属性将这一周的七天设成选中状态。

组件代码 - WeekChooser.mxml：

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
		 xmlns:s="library://ns.adobe.com/flex/spark" 
		 xmlns:mx="library://ns.adobe.com/flex/mx"
		 width="150"
		 creationComplete="init(event)">
	<fx:Metadata>
		[Event(name="change", type="flash.events.Event")]
	</fx:Metadata>
	<fx:Script>
		<![CDATA[
			import mx.controls.DateChooser;
			import mx.core.FlexGlobals;
			import mx.events.CalendarLayoutChangeEvent;
			import mx.events.FlexEvent;
			import mx.formatters.DateFormatter;
			import mx.managers.PopUpManager;
			
			/**
			 * 开始时间
			 */
			public var startTime:String;
			
			/**
			 * 结束时间
			 */
			public var endTime:String;
			
			/**
			 * 文本框文字
			 */
			[Bindable]
			public var labText:String = "";
			
			/**
			 * 日期选择控件
			 */
			private var _dc:DateChooser = new DateChooser();
			
			/**
			 * 日期弹出的父容器
			 */
			private var _popParent:DisplayObject;
			
			/**
			 * 日期选择控件是否弹出
			 */
			private var _isShow:Boolean = false;
			
			/**
			 * 日期格式化
			 */
			private var _dateFormatter:DateFormatter = new DateFormatter();
			
			/**
			 * 初始化控件
			 */
			protected function init(event:FlexEvent):void
			{
				_dateFormatter.formatString = "YYYY-MM-DD";
				
				_dc.monthNames = ["一月","二月","三月","四月","五月","六月",
					"七月","八月","九月","十月","十一月","十二月"];
				_dc.dayNames = ["日","一","二","三","四","五","六"];
				_dc.addEventListener(CalendarLayoutChangeEvent.CHANGE, dcChange);
				
				//初始化日期
				setDate(new Date());
			}
			
			/**
			 * 显示日期选择控件
			 */
			protected function showDC():void
			{
				if(_popParent == null){
					_popParent = FlexGlobals.topLevelApplication as DisplayObject;
				}
				
				if(!_isShow){
					PopUpManager.addPopUp(_dc, _popParent , false);
					PopUpManager.centerPopUp(_dc);
					
					var px:Point = this.localToGlobal(new Point(this.width,0));
					_dc.x = px.x;
					_dc.y = px.y;
					
					//延迟添加舞台点击监听，防止还没弹出就调用了
					callLater(addListener);
					_isShow = true;
				}else{
					hiddenDC();
				}
			}
			
			/**
			 * 添加监听（舞台任意位置点击则隐藏日期选择控件）
			 */
			private function addListener():void{
				_popParent.addEventListener(MouseEvent.CLICK,hiddenDC);
			}
			
			/**
			 * 隐藏日期选择控件
			 */
			private function hiddenDC(e:Event = null):void{
				PopUpManager.removePopUp(_dc);
				_popParent.removeEventListener(MouseEvent.CLICK,hiddenDC);
				_isShow = false;
			}
			
			/**
			 * 日期选择完毕
			 */
			private function dcChange(event:CalendarLayoutChangeEvent):void{
				// 获取当前选中的日期，再根据当前日期是周几取得这星期的第一天和最后一天
				var currentDate:Date = DateChooser(event.target).selectedDate;
				setDate(currentDate);
				
				var e:Event = new Event(Event.CHANGE);
				dispatchEvent(e);
				
				hiddenDC();
			}
			
			/**
			 * 日期设置
			 */
			public function setDate(currentDate:Date):void{
				// 获取日期，再根据日期是周几取得这星期的第一天和最后一天
				var date1:Date = new Date(currentDate.getTime());
				var date2:Date = new Date(currentDate.getTime());
				var distinceDay:Number = currentDate.getDay();
				if(distinceDay > 0)
				{
					date1.date -= distinceDay - 1;
					date2.date = currentDate.date + (7 - distinceDay);
				}
				else
				{
					date1.date -= 6;
				}
				_dc.selectedRanges = [{rangeStart: date1, rangeEnd: date2}];
				
				startTime = _dateFormatter.format(date1);
				endTime = _dateFormatter.format(date2);
				labText = startTime + " ~ " + endTime;
			}
			
		]]>
	</fx:Script>
	<s:TextInput id="lab" text="{labText}" click="showDC()" width="100%" editable="false"/>
</s:Group>

使用：

<?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" 
			   xmlns:local="*">
	
	<fx:Script>
		<![CDATA[
			import mx.controls.Alert;
			protected function wc_changeHandler(event:Event):void
			{
				Alert.show("开始时间：" + wc.startTime +"\n结束时间：" + wc.endTime);
			}
		]]>
	</fx:Script>
	<local:WeekChooser id="wc" change="wc_changeHandler(event)"
					   horizontalCenter="0" verticalCenter="0"/>
</s:Application>