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

<div class="blogpost-body" id="cnblogs_post_body">
 
<div>
 使用过DateField的我们都知道，DateField 控件是用于显示日期的文本字段，字段右侧带有日历图标。当用户在控件边框内的任一位置单击时，将弹出一个 DateChooser 控件，显示当月的所有日期。如果未选择日期，则该文本字段为空白，并且 DateChooser 控件中将显示当前日期的月份。当 DateChooser 控件处于打开状态时，用户可以在各个月份和年份之间滚动，并选择某个日期。选择日期后，DateChooser 控件关闭，文本字段将显示所选的日期。而在我们的业务过程中，很多时候我们需要选择的日期不仅仅是某天，可能还需要的是某些时间段，比如说一周，一个月，这是DateField就满足不了我们的需求，它提供的只是对某个日期的选择。这时候就需要我们进行自定义组件的开发了。而这个突破口就在DateChooser ，DateChooser控件显示月份名称、年份名称，并显示包含当月的所有日期的网格（每列标有对应的星期日期）。用户可以选择一个日期、某个日期范围或者多个日期。此控件包含前进和后退箭头按钮，用于改变年份和月份。您可以允许用户选择多个日期，禁止选择特定日期和只限于显示某个日期范围。DateChooser的这些特性满足了我们的需求，因此我们可以利用它进行我们所需要组件的开发。下面先看一小效果实现图（鼠标点击）：
</div>
<div>
 
</div>
<div>
 我们可以看下包结构：
</div>
<div>
 <img alt="" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-6db3ecd7a372b835f0b66c53ba94a708.png">
</div>
<div>
 首先是对控件的主体DateWeekMouthDateField.mxml进行分析，代码如下
</div>
<div>
 <div class="cnblogs_code">
<pre class="blockcode"><?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
 {

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

浏览过的版块