使用过DateField的我们都知道，DateField 控件是用于显示日期的文本字段，字段右侧带有日历图标。当用户在控件边框内的任一位置单击时，将弹出一个 DateChooser 控件，显示当月的所有日期。如果未选择日期，则该文本字段为空白，并且 DateChooser 控件中将显示当前日期的月份。当 DateChooser 控件处于打开状态时，用户可以在各个月份和年份之间滚动，并选择某个日期。选择日期后，DateChooser 控件关闭，文本字段将显示所选的日期。而在我们的业务过程中，很多时候我们需要选择的日期不仅仅是某天，可能还需要的是某些时间段，比如说一周，一个月，这是DateField就满足不了我们的需求，它提供的只是对某个日期的选择。这时候就需要我们进行自定义组件的开发了。而这个突破口就在DateChooser ，DateChooser控件显示月份名称、年份名称，并显示包含当月的所有日期的网格（每列标有对应的星期日期）。用户可以选择一个日期、某个日期范围或者多个日期。此控件包含前进和后退箭头按钮，用于改变年份和月份。您可以允许用户选择多个日期，禁止选择特定日期和只限于显示某个日期范围。DateChooser的这些特性满足了我们的需求，因此我们可以利用它进行我们所需要组件的开发。下面先看一小效果实现图（鼠标点击）：
我们可以看下包结构：
首先是对控件的主体DateWeekMouthDateField.mxml进行分析，代码如下
<?xml version="1.0" encoding="utf-8"?>
<s:BorderContainer 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="100%" height="100%" backgroundAlpha="0"
borderVisible="false"
buttonMode="true" useHandCursor="true"
creationComplete="init();"
click="popUpButton.open();">
<fx:Style source="css/tabNavigator.css"/>
<fx:Script>
<![CDATA[
import DateField.component.DateChoosers;
import DateField.event.DateFieldChooseEvent;
[Embed(source="DateField/images/leftIcon.png")]
private var leftIcon:Class;
[Embed(source="DateField/images/rightIcon.png")]
private var rightIcon:Class;
public var dateChoosers:DateChoosers = new DateChoosers();;
/**
* 初始化导航菜单组
* */
private function init():void
{
var date:Date = new Date();
var dateString:String = "" + date.getFullYear() + "-" + (date.getMonth()+1) + "-"
+ date.getDate();
dateSlectLabel.text = dateString;
// dateChoosers.dateLabel = ["日","周","月","年"];
// dateChoosers.dateLabel = ["日","周"];
popUpButton.popUp = dateChoosers;
/* open it just for initialize. */
popUpButton.open();
popUpButton.close();
dateChoosers.addEventListener(DateFieldChooseEvent.DATE_SELECTED,dateSelectedHandler);
}
protected function dateSelectedHandler(event:DateFieldChooseEvent):void
{
// TODO Auto-generated method stub
dateSlectLabel.text = event.vEventResult;
popUpButton.label = event.vEventResult;
popUpButton.close();
}
]]>
</fx:Script>
<fx:Declarations>
<!-- 将非可视元素（例如服务、值对象）放在此处 -->
</fx:Declarations>
<s:layout>
<s:VerticalLayout />
</s:layout>
<s:BorderContainer id="imgLabel" width="100%" height="100%" borderVisible="false" backgroundAlpha="0">
<s:Image id="leftImg" x="0" source="{leftIcon}" />
<s:Label id="dateSlectLabel" x="15" y="3"
text="2013-7-6"
paddingLeft="5" paddingRight="5"
verticalAlign="middle" maxDisplayedLines="1" textAlign="center" fontFamily="微软雅黑" />
<s:Image id="rightImg" x="{dateSlectLabel.width + 15}" source="{rightIcon}" />
</s:BorderContainer>
<mx:PopUpButton id="popUpButton"
label="日期选择" visible="false" chromeColor="0xE8FFE2"
alpha="0.8" buttonMode="true" width="0" height="0" open="dateChoosers.x -= 25;"
openAlways="true" useHandCursor="true">
</mx:PopUpButton>
</s:BorderContainer>
DateWeekMouthDateField 的主体是一个BorderContainer，它包含了一个显示标签Label和2个用来外观显示Image以及一个PopUpButton，看下Script里面的代码我们就可以发现它弹出的是dateChoosers。下面我们来看下dateChoosers，源码如下：
package DateField.component
{
import DateField.event.DateFieldChooseEvent;
import mx.containers.TabNavigator;
import mx.containers.VBox;
import mx.controls.DateChooser;
import mx.controls.List;
import mx.core.ScrollPolicy;
import mx.events.CalendarLayoutChangeEvent;
import mx.events.ListEvent;
import spark.components.BorderContainer;
/**
* 日周月年日期选择控件，包含了日日期选择器，周日期选择器，月份选择器和年份选择器
* @author jackyWHJ
* @date 2013-7-30
* @version 1.0
*
*/
public class DateChoosers extends BorderContainer
{
//-----------------------------------------------------
// 控件需要从外部接收参数的属性定义 start
//-----------------------------------------------------
/**
* 启用年份导航。如果为 true，则显示的年份右侧会出现向上和向下按钮。
* 您可以使用这些按钮更改当前年份。
* 在采用年份显示在月份之前的日期格式的区域设置中，这些按钮将显示在年份的左侧。
* @default true
*/
private var _yearNavigationEnabled:Boolean = true;
/**
* DateChooser 控件的工作日名称。
* 更改此属性可更改 DateChooser 控件的日期标签。
* 星期日为第一天（在索引为 0 处）。
* 一周中其余的天按照正常的顺序命名。
* @default ["日", "一", "二", "三", "四", "五", "六"]
*/
private var _dayNames:Array = ["日", "一", "二", "三", "四", "五", "六"];
/**
* 显示在 DateChooser 控件顶部的月份名称。
* 将 monthSymbol 属性追加到由 monthNames 属性指定的值末尾，该属性这在语言（如日语）中很有用。
* @default ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月","十二月"]
*/
private var _monthNames:Array = ["一月", "二月", "三月", "四月", "五月",
"六月", "七月", "八月", "九月", "十月", "十一月","十二月"];
/**
* 控件中可选的最后一个年份。
* @default 2020
*/
private var _maxYear:uint = 2020;
/**
* 控件中可选的第一个年份。
* @default 2009
*/
private var _minYear:uint = 2009;
/**
* 日期控件的宽度
* @default 210
*/
private var _chooserWidth:Number = 210;
/**
* 日期控件的高度
* @default 200
*/
private var _chooserHeight:Number = 200;
/**
* 如果为 true，则指定在 DateChooser 控件中允许选择不连续的日期。
* 仅当 allowMultipleSelection 属性设置为 true 时，此属性才起作用。
* 设置此属性可更改 DateChooser 控件的外观。 默认值为 false。
*/
private var _allowDisjointSelection:Boolean = false;
/**
* 如果为 true，则指定在 DateChooser 控件中允许选择多个日期。
* 设置此属性可更改 DateChooser 控件的外观。 默认值true。
*/
private var _allowMultipleSelection:Boolean = true;
/**
* 每周中要禁用的日期。每月中除指定日期外，所有日期都被禁用。
* 此属性可更改 DateChooser 控件的外观。
* 此数组中的元素可使用介于 0（星期日）到 6（星期六）之间的值。例如，如果设置值 [ 0, 6 ]，将禁用星期日和星期六。
* 默认值为 []。
* */
private var _disabledDays:Array = [];
/**
* 禁用一天或多天。 此属性接受对象 Array 作为参数。
* 此数组中的所有对象都是 Date 对象，用于指定要禁用的各个日期；也可以是一个包含 rangeStart 和（或）rangeEnd 属性的对象。
* 这些属性的值描述了日期范围的边界。如果忽略其中任一属性，则认为在该方向上无范围限制。
* 如果仅指定 rangeStart，则将禁用指定日期之后的所有日期（包括 rangeStart 日期）。
* 如果仅指定 rangeEnd，则将禁用指定日期之前的所有日期（包括 rangeEnd 日期）。
* 要禁用单个日期，请使用一个 Date 对象指定 Array 中的某个日期。时间值（如果存在）将以 Date 对象为零值，依次递增。
* 以下示例将禁用下列日期：2006 年 1 月 11 日，从 2006 年 1 月 23 至同年 2 月 10 日，以及 2006 年 3 月 1 日及后续所有日期。
* disabledRanges="{[ new Date(2006,0,11), {rangeStart: new Date(2006,0,23),
* rangeEnd: new Date(2006,1,10)}, {rangeStart: new Date(2006,2,1)} ]}"
* 默认值为 []。
*/
private var _disabledRanges:Array = [];
/**
* 一个数字，该数字代表显示在 DateChooser 控件第一列中的一周中的日期。
* 该值必须介于 0 到 6 之间，其中 0 对应星期日，这是 dayNames Array 中的第一个元素。
* 设置此属性将更改日期列的顺序。例如，将其设置为 1 可将星期一设置为该控件中的第一列。
* 默认值为 0 (Sunday)。
*/
private var _firstDayOfWeek:Object = 0;
/**
* 此属性将追加到由 monthNames 属性指定的值的末尾，用于定义显示在 DateChooser 控件顶部的月份名称。
* 有些语言（如日语）会在月份名称后使用额外的符号。 默认值为 ""。
*/
private var _monthSymbol:String = "";
/**
* 日期范围，可从中选择日期。例如，可以选择 04-12-2006 和 04-12-2007 之间的日期，而超出此范围的日期将被禁用。
* 此属性接受 Object 作为参数。该 Object 包含 Date 类型的两个属性：rangeStart 和 rangeEnd。
* 如果仅指定了 rangeStart，则在此指定日期之后的所有日期都可用。如果仅指定了 rangeEnd，则在此指定日期之前的所有日期都可用。
* 要仅在 DateChooser 控件中使用一个日期，可以直接传递一个 Date 对象。时间值（如果存在）将以 Date 对象为零值，依次递增。
* 以下示例仅启用 2006 年 1 月 1 日到 2006 年 6 月 30 日的范围。1 月之前和 6 月之后的月份不会出现在 DateChooser 中。
* selectableRange="{{rangeStart : new Date(2006,0,1), rangeEnd : new Date(2006,5,30)}}"
* 默认值为 null
*/
private var _selectableRange:Object;
/**
* 在 DateChooser 控件中选择的日期。如果传入的 Date 对象包含任何时间值，则它们将被清零。
* 在控件中选择当前所选日期时按住 Ctrl 键可取消对该日期的选择，将 selectedDate 属性设置为 null，然后分派 change 事件。
* 默认值为 null。
*/
private var _selectedDate:Date = null;
/**
* 如果为 true，则指定在 DateChooser 控件中加亮显示今天。设置此属性可更改 DateChooser 控件的外观。
* 默认值为 true。
*/
private var _showToday:Boolean = true;
/**
* 此属性附加在 DateChooser 控件顶部显示的年份末尾。有些语言（如日语）会在年份后添加符号。
* 默认值为 ""。
*/
private var _yearSymbol:String = "";
/**
* 日期选择器标签 ，日期选择器就是由这个标签来生成的。
* 总共有["日","周","月","年"]4个日期标签，如果该值设置为["日","周"]的话，那就只有日周2个日期选择器。
*/
private var _dateLabel:Array = ["日","周","月"];
/**
* 月份日期选择器日期范围需要在当前月份推前的月份数，比如现在是2013年7月，
* 那么默认值48则表示从该日期往前推48个月，也就是说，目前的日期选择最前可以是2009年7月
*/
private var _beforeMonthCount:uint = 48;
/**
* 月份日期选择器日期范围需要在当前月份推后的月份数，比如现在是2013年7月，
* 值为2则表示从该日期往后推2个月，也就是说，日期选择最后可以是2013年9月
*/
private var _afterMonthCount:uint = 0;
/**
* 年份日期选择器日期范围需要在当前月份推前的月份数，比如现在是2013年
* 那么默认值4则表示从该日期往前推4年，也就是说，目前的日期选择最前可以是2009年
*/
private var _beforeYearCount:uint = 4;
/**
* 年份日期选择器日期范围需要在当前年份推后的月份数，比如现在是2013年，
* 值为2则表示从该日期往后推2年，也就是说，日期选择最后可以是2015年。
*/
private var _afterYearCount:uint = 0;
/**
* 当前默认是选择哪个日期选择器，默认是0，日日期选择器
*/
private var _selectedIndex:int = 0;
//-----------------------------------------------------
// 控件需要从外部接收参数的属性定义 end
//-----------------------------------------------------
//-----------------------------------------------------
// 控件内部属性定义 start
//-----------------------------------------------------
/**
* 月份选择下拉列表
*/
private var monthList:List;
/**
* 年份选择下拉列表
*/
private var yearList:List;
/**
* 月份选择控件数据源数据
*/
private var dateArray:Array;
/**
* 日日期选择器
*/
private var dateChooser1:DateChooser;
/**
* 周日期选择器
*/
private var dateChooser2:DateChooser;
/**
* MX TabNavigator 容器通过包括一个用于在其子容器间导航的 TabBar 容器来扩展 MX ViewStack 容器。
*/
private var tabNavigator:TabNavigator;
/**
* TabNavigator的日日期选择器子容器
*/
private var dateField:VBox;
/**
* TabNavigator的周日期选择器子容器
*/
private var weekField:VBox;
/**
* TabNavigator的月日期选择器子容器
*/
private var monthField:VBox;
/**
* TabNavigator的年日期选择器子容器
*/
private var yearField:VBox;
//-----------------------------------------------------
// 控件内部属性定义 end
//-----------------------------------------------------
/**
* 构造函数，初始化并添加子容器
*
*/
public function DateChoosers()
{
//TODO: implement function
super();
this.width = chooserWidth;
this.height = chooserHeight;
}
override protected function createChildren():void
{
//初始化tabNavigator
if(tabNavigator == null)
{
tabNavigator = new TabNavigator();
tabNavigator.styleName = "TabNavigator";
// tabNavigator.percentWidth = 100;
tabNavigator.width = chooserWidth + 1;
tabNavigator.percentHeight = 100;
tabNavigator.x = -1;
this.addElement(tabNavigator);
}
//设置 tabNavigator 的tabWidth 长度
if (dateLabel != null && dateLabel.length >0)
{
tabNavigator.setStyle("tabWidth",chooserWidth/dateLabel.length + 1);
}
//dateLabel 的长度大于0，也是就是dateLabel至少有1个元素，则添加日日期选择器容器
if(dateLabel.length > 0 && dateField == null)
{
//初始化dateField
dateField = new VBox();
dateField.label = dateLabel[0];
dateField.percentWidth = 100;
dateField.percentHeight = 100;
tabNavigator.addElement(dateField);
}
//dateLabel 的长度大于1，也是就是dateLabel至少有2个元素，则添加周日期选择器容器
if(dateLabel.length > 1 && weekField == null)
{
//初始化weekField
weekField = new VBox();
weekField.label = dateLabel[1];
weekField.percentWidth = 100;
weekField.percentHeight = 100;
tabNavigator.addElement(weekField);
}
//dateLabel 的长度大于2，也是就是dateLabel至少有3个元素，则添加月日期选择器容器
if(dateLabel.length > 2 && monthField == null)
{
//初始化monthField
monthField = new VBox();
monthField.label = dateLabel[2];
monthField.percentWidth = 100;
monthField.percentHeight = 100;
monthField.verticalScrollPolicy = ScrollPolicy.OFF ;
monthField.horizontalScrollPolicy = ScrollPolicy.OFF;
tabNavigator.addElement(monthField);
}
//dateLabel 的长度大于3，也是就是dateLabel至少有4个元素，则添加年日期选择器容器
if(dateLabel.length > 3 && yearField == null)
{
//初始化yearField
yearField = new VBox();
yearField.label = dateLabel[3];
yearField.percentWidth = 100;
yearField.percentHeight = 100;
yearField.verticalScrollPolicy = ScrollPolicy.OFF ;
yearField.horizontalScrollPolicy = ScrollPolicy.OFF;
tabNavigator.addElement(yearField);
}
tabNavigator.selectedIndex = selectedIndex;
this.init();
}
/**
* 初始化日周月各日期选择器，并绑定数据源,添加监听事件
*
*/
private function init():void
{
if(dateField != null)
{
//初始化day日期选择器的
dateChooser1 = new DateChooser();
dateChooser1.percentWidth = 100;
dateChooser1.percentHeight = 100;
dateChooser1.yearNavigationEnabled = this.yearNavigationEnabled;
dateChooser1.dayNames = this.dayNames;
dateChooser1.monthNames = this.monthNames;
dateChooser1.maxYear = this.maxYear;
dateChooser1.minYear = this.minYear;
dateChooser1.allowDisjointSelection = allowDisjointSelection;
dateChooser1.allowMultipleSelection = allowMultipleSelection;
dateChooser1.disabledDays = disabledDays;
dateChooser1.disabledRanges = disabledRanges;
dateChooser1.firstDayOfWeek = firstDayOfWeek;
dateChooser1.selectedDate = selectedDate;
dateChooser1.monthSymbol = monthSymbol;
dateChooser1.selectableRange = selectableRange;
dateChooser1.showToday = showToday;
dateChooser1.yearSymbol = yearSymbol;
dateChooser1.x = -1;
dateChooser1.styleName = "DateChooser";
dateChooser1.addEventListener(CalendarLayoutChangeEvent.CHANGE,dateChooser1_changeHandler);
dateField.addElement(dateChooser1);
}
if(weekField != null)
{
//初始化week日期选择器
dateChooser2 = new DateChooser();
dateChooser2.percentWidth = 100;
dateChooser2.percentHeight = 100;
dateChooser2.yearNavigationEnabled = this.yearNavigationEnabled;
dateChooser2.dayNames = this.dayNames;
dateChooser2.monthNames = this.monthNames;
dateChooser2.maxYear = this.maxYear;
dateChooser2.minYear = this.minYear;
dateChooser2.allowDisjointSelection = this.allowDisjointSelection;
dateChooser2.allowMultipleSelection = this.allowMultipleSelection;
dateChooser2.disabledDays = disabledDays;
dateChooser2.disabledRanges = disabledRanges;
dateChooser2.firstDayOfWeek = firstDayOfWeek;
dateChooser2.monthSymbol = monthSymbol;
dateChooser2.yearSymbol = yearSymbol;
dateChooser2.x = -1;
dateChooser2.styleName = "DateChooser";
dateChooser2.addEventListener(CalendarLayoutChangeEvent.CHANGE,dateChooser2_changeHandler);
weekField.addElement(dateChooser2);
//初始化week日期选择器的选择数据
var currentDate:Date;
//如果已经设置了选择的日期，则当前日期安装选择日期来
if(selectedDate)
{
currentDate = selectedDate;
}
else
{
currentDate = new Date();
}
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 -= distinceDay - 6;
}
// trace(DateChooser(event.target).selectedDate.getUTCDay ());
dateChooser2.selectedRanges = [{rangeStart: date1, rangeEnd: date2}];
}
var currentYear:uint;
var beforeYear:uint;
var afterYear:uint;
//初始化月日期选择器
var rowCount:int = 0;
if(monthField != null)
{
monthList = new List();
rowCount = 0;
dateArray = new Array();
//根据当前日期和要推前的月份数计算最前日期应该是那一年那一月
currentYear = currentDate.getFullYear();
var currentMonth:uint = currentDate.getMonth() + 1;
beforeYear = currentYear - uint(this.beforeMonthCount / 12);
var beforeMonth:int = currentMonth - uint(this.beforeMonthCount % 12);
//如果减下来的日期已经超过这一年的日期，则月份从前一年开始算
if(beforeMonth <= 0)
{
-- beforeYear;
beforeMonth = 12 + beforeMonth;
}
afterYear = currentYear + uint(this.afterMonthCount / 12);
var afterMonth:int = currentMonth + uint(this.afterMonthCount % 12);
//如果加下来的日期已经超过这一年的日期，则月份从后一年开始算
if(afterMonth > 12)
{
++ afterYear;
afterMonth = afterMonth - 12;
}
//初始化月日期选择器的数据源
for (var i:int = afterYear; i >= beforeYear; i--)
{
for (var j:int = 12 ;j >0 ; j--)
{
//最后日期后的略过
if (i == afterYear && j > afterMonth)
{
continue;
}
//最前日期前的直接终止
if (i == beforeYear && j < beforeMonth)
{
break;
}
var dateString:String = "" + i + "年" + j + "月";
rowCount = dateArray.push(dateString);
//如果设置了选中日期，则默认选择日期按照选中日期来，否则，默认选中日期为当前日期
if(this.selectedDate)
{
if (i == this.selectedDate.getFullYear() && j == (this.selectedDate.getMonth() + 1))
{
monthList.selectedIndex = rowCount - 1;
}
}
else
{
if (i == currentYear && j == currentMonth)
{
monthList.selectedIndex = rowCount - 1;
}
}
}
}
monthList.dataProvider = dateArray;
monthField.addElement(monthList);
monthList.percentWidth = 100;
monthList.addEventListener(ListEvent.ITEM_CLICK, itemClickHandler);
}
//初始化年日期选择器
if(yearField != null)
{
yearList = new List();
rowCount = 0;
dateArray = new Array();
currentYear = currentDate.getFullYear();
beforeYear = currentYear - this.beforeYearCount;
afterYear = currentYear + this.afterYearCount;
//初始化年日期选择器的数据源
for (var k:int = afterYear; k >= beforeYear; k--)
{
var yearString:String = "" + k + "年";
rowCount = dateArray.push(yearString);
//如果设置了选中日期，则默认选择日期按照选中日期来，否则，默认选中日期为当前日期
if(this.selectedDate)
{
if (k == this.selectedDate.getFullYear())
{
yearList.selectedIndex = rowCount - 1;
}
}
else
{
if (k == currentYear)
{
yearList.selectedIndex = rowCount - 1;
}
}
}
yearList.dataProvider = dateArray;
yearField.addElement(yearList);
yearList.percentWidth = 100;
yearList.addEventListener(ListEvent.ITEM_CLICK, yearItemClickHandler);
}
}
/**
* 年日期选择器的选择点击监听事件
* @param evt
*
*/
protected function yearItemClickHandler(event:ListEvent):void
{
// TODO Auto-generated method stub
yearList.selectedIndex = event.rowIndex;
this.dispatchEvent(new DateFieldChooseEvent(DateFieldChooseEvent.DATE_SELECTED,
yearList.selectedItem));
}
/**
* 月日期选择器的选择点击监听事件
* @param evt
*
*/
protected function itemClickHandler(evt:ListEvent):void {
trace("evt.index:" + monthList.selectedItem);
monthList.selectedIndex = evt.rowIndex;
this.dispatchEvent(new DateFieldChooseEvent(DateFieldChooseEvent.DATE_SELECTED,
monthList.selectedItem));
}
/**
* 周 日期选择器的选择点击监听事件
* @param event
*
*/
protected function dateChooser2_changeHandler(event:CalendarLayoutChangeEvent):void
{
// 获取当前选中的日期，再根据当前日期是周几取得这星期的第一天和最后一天
var currentDate:Date = DateChooser(event.target).selectedDate;
// trace(DateChooser(event.target).selectedDate);
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 -= distinceDay - 6;
}
dateChooser2.selectedRanges = [{rangeStart: date1, rangeEnd: date2}];
var dateString:String = "" + date1.getFullYear() + "-" + (date1.getMonth()+1) + "-"
+ date1.getDate() + "~" + date2.getFullYear() + "-" + (date2.getMonth()+1) + "-"
+ date2.getDate();
trace(dateString);
this.dispatchEvent(new DateFieldChooseEvent(DateFieldChooseEvent.DATE_SELECTED,
dateString));
}
/**
* 日日期选择器的选择点击监听事件
* @param event
*
*/
protected function dateChooser1_changeHandler(event:CalendarLayoutChangeEvent):void
{
var date:Date = DateChooser(event.target).selectedDate;
var ob:Object = DateChooser(event.target).selectedRanges;
var dateString:String;
// trace(ob);
if(ob != null)
{
var date1:Date = ob[0].rangeStart;
var date2:Date = ob[0].rangeEnd;
if(date1.getFullYear() == date2.getFullYear() && date1.getMonth() == date2.getMonth()
&& date1.getDate() == date2.getDate())
{
dateString = "" + date.getFullYear() + "-" + (date.getMonth()+1) + "-"
+ date.getDate();
}
else
{
dateString = "" + date1.getFullYear() + "-" + (date1.getMonth()+1) + "-"
+ date1.getDate() + "~" + date2.getFullYear() + "-" + (date2.getMonth()+1) + "-"
+ date2.getDate();
}
}
else
{
dateString = "" + date.getFullYear() + "-" + (date.getMonth()+1) + "-"
+ date.getDate();
}
trace(dateString);
this.dispatchEvent(new DateFieldChooseEvent(DateFieldChooseEvent.DATE_SELECTED,
dateString));
}
/**
* 启用年份导航。如果为 true，则显示的年份右侧会出现向上和向下按钮。
* 您可以使用这些按钮更改当前年份。
* 在采用年份显示在月份之前的日期格式的区域设置中，这些按钮将显示在年份的左侧。
*/
public function get yearNavigationEnabled():Boolean
{
return _yearNavigationEnabled;
}
/**
* @private
*/
public function set yearNavigationEnabled(value:Boolean):void
{
_yearNavigationEnabled = value;
}
/**
* DateChooser 控件的工作日名称。
* 更改此属性可更改 DateChooser 控件的日期标签。
* 星期日为第一天（在索引为 0 处）。
* 一周中其余的天按照正常的顺序命名。
* @default ["日", "一", "二", "三", "四", "五", "六"]
*/
public function get dayNames():Array
{
return _dayNames;
}
/**
* @private
*/
public function set dayNames(value:Array):void
{
_dayNames = value;
}
/**
* 显示在 DateChooser 控件顶部的月份名称。
* 将 monthSymbol 属性追加到由 monthNames 属性指定的值末尾，该属性这在语言（如日语）中很有用。
* @default ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月","十二月"]
*/
public function get monthNames():Array
{
return _monthNames;
}
/**
* @private
*/
public function set monthNames(value:Array):void
{
_monthNames = value;
}
/**
* 控件中可选的最后一个年份。
* @default 2020
*/
public function get maxYear():uint
{
return _maxYear;
}
/**
* @private
*/
public function set maxYear(value:uint):void
{
_maxYear = value;
}
/**
* 控件中可选的第一个年份。
* @default 2009
*/
public function get minYear():uint
{
return _minYear;
}
/**
* @private
*/
public function set minYear(value:uint):void
{
_minYear = value;
}
/**
* 日期控件的宽度
* @default 210
*/
public function get chooserWidth():Number
{
return _chooserWidth;
}
/**
* @private
*/
public function set chooserWidth(value:Number):void
{
_chooserWidth = value;
}
/**
* 日期控件的高度
* @default 200
*/
public function get chooserHeight():Number
{
return _chooserHeight;
}
/**
* @private
*/
public function set chooserHeight(value:Number):void
{
_chooserHeight = value;
}
/**
* 日期选择器标签 ，日期选择器就是由这个标签来生成的。
* 总共有["日","周","月","年"]4个日期标签，如果该值设置为["日","周"]的话，那就只有日周2个日期选择器。
*/
public function get dateLabel():Array
{
return _dateLabel;
}
/**
* @private
*/
public function set dateLabel(value:Array):void
{
_dateLabel = value;
}
/**
* 如果为 true，则指定在 DateChooser 控件中允许选择不连续的日期。
* 仅当 allowMultipleSelection 属性设置为 true 时，此属性才起作用。
* 设置此属性可更改 DateChooser 控件的外观。 默认值为 false。
*/
public function get allowDisjointSelection():Boolean
{
return _allowDisjointSelection;
}
/**
* @private
*/
public function set allowDisjointSelection(value:Boolean):void
{
_allowDisjointSelection = value;
}
/**
* 如果为 true，则指定在 DateChooser 控件中允许选择多个日期。
* 设置此属性可更改 DateChooser 控件的外观。 默认值true。
*/
public function get allowMultipleSelection():Boolean
{
return _allowMultipleSelection;
}
/**
* @private
*/
public function set allowMultipleSelection(value:Boolean):void
{
_allowMultipleSelection = value;
}
/**
* 每周中要禁用的日期。每月中除指定日期外，所有日期都被禁用。
* 此属性可更改 DateChooser 控件的外观。
* 此数组中的元素可使用介于 0（星期日）到 6（星期六）之间的值。例如，如果设置值 [ 0, 6 ]，将禁用星期日和星期六。
* 默认值为 []。
* */
public function get disabledDays():Array
{
return _disabledDays;
}
/**
* @private
*/
public function set disabledDays(value:Array):void
{
_disabledDays = value;
}
/**
* 禁用一天或多天。 此属性接受对象 Array 作为参数。
* 此数组中的所有对象都是 Date 对象，用于指定要禁用的各个日期；也可以是一个包含 rangeStart 和（或）rangeEnd 属性的对象。
* 这些属性的值描述了日期范围的边界。如果忽略其中任一属性，则认为在该方向上无范围限制。
* 如果仅指定 rangeStart，则将禁用指定日期之后的所有日期（包括 rangeStart 日期）。
* 如果仅指定 rangeEnd，则将禁用指定日期之前的所有日期（包括 rangeEnd 日期）。
* 要禁用单个日期，请使用一个 Date 对象指定 Array 中的某个日期。时间值（如果存在）将以 Date 对象为零值，依次递增。
* 以下示例将禁用下列日期：2006 年 1 月 11 日，从 2006 年 1 月 23 至同年 2 月 10 日，以及 2006 年 3 月 1 日及后续所有日期。
* disabledRanges="{[ new Date(2006,0,11), {rangeStart: new Date(2006,0,23),
* rangeEnd: new Date(2006,1,10)}, {rangeStart: new Date(2006,2,1)} ]}"
* 默认值为 []。
*/
public function get disabledRanges():Array
{
return _disabledRanges;
}
/**
* @private
*/
public function set disabledRanges(value:Array):void
{
_disabledRanges = value;
}
/**
* 一个数字，该数字代表显示在 DateChooser 控件第一列中的一周中的日期。
* 该值必须介于 0 到 6 之间，其中 0 对应星期日，这是 dayNames Array 中的第一个元素。
* 设置此属性将更改日期列的顺序。例如，将其设置为 1 可将星期一设置为该控件中的第一列。
* 默认值为 0 (Sunday)。
*/
public function get firstDayOfWeek():Object
{
return _firstDayOfWeek;
}
/**
* @private
*/
public function set firstDayOfWeek(value:Object):void
{
_firstDayOfWeek = value;
}
/**
* 此属性将追加到由 monthNames 属性指定的值的末尾，用于定义显示在 DateChooser 控件顶部的月份名称。
* 有些语言（如日语）会在月份名称后使用额外的符号。 默认值为 ""。
*/
public function get monthSymbol():String
{
return _monthSymbol;
}
/**
* @private
*/
public function set monthSymbol(value:String):void
{
_monthSymbol = value;
}
/**
* 日期范围，可从中选择日期。例如，可以选择 04-12-2006 和 04-12-2007 之间的日期，而超出此范围的日期将被禁用。
* 此属性接受 Object 作为参数。该 Object 包含 Date 类型的两个属性：rangeStart 和 rangeEnd。
* 如果仅指定了 rangeStart，则在此指定日期之后的所有日期都可用。如果仅指定了 rangeEnd，则在此指定日期之前的所有日期都可用。
* 要仅在 DateChooser 控件中使用一个日期，可以直接传递一个 Date 对象。时间值（如果存在）将以 Date 对象为零值，依次递增。
* 以下示例仅启用 2006 年 1 月 1 日到 2006 年 6 月 30 日的范围。1 月之前和 6 月之后的月份不会出现在 DateChooser 中。
* selectableRange="{{rangeStart : new Date(2006,0,1), rangeEnd : new Date(2006,5,30)}}"
* 默认值为 null
*/
public function get selectableRange():Object
{
return _selectableRange;
}
/**
* @private
*/
public function set selectableRange(value:Object):void
{
_selectableRange = value;
}
/**
* 在 DateChooser 控件中选择的日期。如果传入的 Date 对象包含任何时间值，则它们将被清零。
* 在控件中选择当前所选日期时按住 Ctrl 键可取消对该日期的选择，将 selectedDate 属性设置为 null，然后分派 change 事件。
* 默认值为 null。
*/
public function get selectedDate():Date
{
return _selectedDate;
}
/**
* @private
*/
public function set selectedDate(value:Date):void
{
_selectedDate = value;
}
/**
* 如果为 true，则指定在 DateChooser 控件中加亮显示今天。设置此属性可更改 DateChooser 控件的外观。
* 默认值为 true。
*/
public function get showToday():Boolean
{
return _showToday;
}
/**
* @private
*/
public function set showToday(value:Boolean):void
{
_showToday = value;
}
/**
* 此属性附加在 DateChooser 控件顶部显示的年份末尾。有些语言（如日语）会在年份后添加符号。
* 默认值为 ""。
*/
public function get yearSymbol():String
{
return _yearSymbol;
}
/**
* @private
*/
public function set yearSymbol(value:String):void
{
_yearSymbol = value;
}
/**
* 月份日期选择器日期范围需要在当前月份推前的月份数，比如现在是2013年7月，
* 那么默认值48则表示从该日期往前推48个月，也就是说，目前的日期选择最前可以是2009年7月
*/
public function get beforeMonthCount():uint
{
return _beforeMonthCount;
}
/**
* @private
*/
public function set beforeMonthCount(value:uint):void
{
_beforeMonthCount = value;
}
/**
* 月份日期选择器日期范围需要在当前月份推后的月份数，比如现在是2013年7月，
* 值为2则表示从该日期往后推2个月，也就是说，日期选择最后可以是2013年9月
*/
public function get afterMonthCount():uint
{
return _afterMonthCount;
}
/**
* @private
*/
public function set afterMonthCount(value:uint):void
{
_afterMonthCount = value;
}
/**
* 年份日期选择器日期范围需要在当前月份推前的月份数，比如现在是2013年
* 那么默认值4则表示从该日期往前推4年，也就是说，目前的日期选择最前可以是2009年
*/
public function get beforeYearCount():uint
{
return _beforeYearCount;
}
/**
* @private
*/
public function set beforeYearCount(value:uint):void
{
_beforeYearCount = value;
}
/**
* 年份日期选择器日期范围需要在当前年份推后的月份数，比如现在是2013年，
* 值为2则表示从该日期往后推2年，也就是说，日期选择最后可以是2015年。
*/
public function get afterYearCount():uint
{
return _afterYearCount;
}
/**
* @private
*/
public function set afterYearCount(value:uint):void
{
_afterYearCount = value;
}
/**
* 当前默认是选择哪个日期选择器，默认是0，日日期选择器
*/
public function get selectedIndex():int
{
return _selectedIndex;
}
/**
* @private
*/
public function set selectedIndex(value:int):void
{
_selectedIndex = value;
}
}
}
DateChoosers 继承了 BorderContainer，在init方法里我们可以看到，它根据自身的属性日周月年的控制添加了2个DateChooser和2个List，也就是说日和周日期选择主要是2个DateChooser，而月和年的日期选择则是2个List。而在DateChooser和List都添加了点击事件的监听，在点击事件之后根据自身特点派发出相应的事件。从而达到日期选择的目的。
下面来看看使用例子:
<?xml version="1.0" encoding="utf-8"?>
<!-- Simple example to demonstrate the Halo List Control -->
<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:DateField="DateField.*"
initialize="application1_initializeHandler(event)">
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
protected function application1_initializeHandler(event:FlexEvent):void
{
// TODO Auto-generated method stub
dwmDF.dateChoosers.dateLabel = ["日","周","月","年"];
dwmDF.dateChoosers.afterMonthCount = 4;
dwmDF.dateChoosers.afterYearCount = 3;
dwmDF.dateChoosers.disabledRanges = [ {rangeStart: new Date(2013,7,3), rangeEnd: new Date(2013,7,10)}];
}
]]>
</fx:Script>
<fx:Declarations>
</fx:Declarations>
<s:Panel title="DateWeekMouthDateField Example"
width="75%" height="75%"
horizontalCenter="0" verticalCenter="0">
<s:VGroup left="10" right="10" top="10" bottom="10">
<DateField:DateWeekMouthDateField id="dwmDF" x="150" y="100">
</DateField:DateWeekMouthDateField>
</s:VGroup>
</s:Panel>
</s:Application>
其中dwmDF.dateChoosers.dateLabel = ["日","周","月","年"];是对日期选择器标签的设置，日期选择器就是由这个标签来生成的。 总共有["日","周","月","年"]4个日期标签，如果该值设置为["日","周"]的话，那就只有日周2个日期选择器。dwmDF.dateChoosers.afterMonthCount = 4;表示月份日期选择器日期范围需要在当前月份推后的月份数，比如现在是2013年7月， 值为2则表示从该日期往后推2个月，也就是说，日期选择最后可以是2013年9月，同理dwmDF.dateChoosers.afterYearCount = 3;是对年份选择器的设置，年份日期选择器日期范围需要在当前年份推后的月份数，比如现在是2013年， 值为2则表示从该日期往后推2年，也就是说，日期选择最后可以是2015年。dwmDF.dateChoosers.disabledRanges是禁用日期的，这个和DateChooser是一致的。
日周月日期选择器这样就功能实现了，在选择后，我们可以通过dwmDF.dateSlectLabel.text获取我们选择的日期内容。
最后附上完整代码地址：http://files.cnblogs.com/jackyWHJ/DateFieldTest.zip，有需要的童鞋拿去，可以的话给我保留下著作声明
时间： 2024-02-19 06:34:30