Flex自定义组件开发之日周月日期选择日历控件

        使用过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，有需要的童鞋拿去，可以的话给我保留下著作声明