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

论坛 期权论坛     
选择匿名的用户   2021-6-2 17:34   176   0
<div class="blogpost-body" id="cnblogs_post_body">
<p> </p>
<div>
  <span style="font-family:&#39;微软雅黑&#39;;">        使用过DateField的我们都知道,DateField 控件是用于显示日期的文本字段,字段右侧带有日历图标。当用户在控件边框内的任一位置单击时,将弹出一个 DateChooser 控件,显示当月的所有日期。如果未选择日期,则该文本字段为空白,并且 DateChooser 控件中将显示当前日期的月份。当 DateChooser 控件处于打开状态时,用户可以在各个月份和年份之间滚动,并选择某个日期。选择日期后,DateChooser 控件关闭,文本字段将显示所选的日期。而在我们的业务过程中,很多时候我们需要选择的日期不仅仅是某天,可能还需要的是某些时间段,比如说一周,一个月,这是DateField就满足不了我们的需求,它提供的只是对某个日期的选择。这时候就需要我们进行自定义组件的开发了。而这个突破口就在DateChooser ,DateChooser控件显示月份名称、年份名称,并显示包含当月的所有日期的网格(每列标有对应的星期日期)。用户可以选择一个日期、某个日期范围或者多个日期。此控件包含前进和后退箭头按钮,用于改变年份和月份。您可以允许用户选择多个日期,禁止选择特定日期和只限于显示某个日期范围。DateChooser的这些特性满足了我们的需求,因此我们可以利用它进行我们所需要组件的开发。下面先看一小效果实现图(鼠标点击):</span>
</div>
<div>
  <span style="font-family:&#39;微软雅黑&#39;;"> </span>
</div>
<div>
  <span style="font-family:&#39;微软雅黑&#39;;"> 我们可以看下包结构:</span>
</div>
<div>
  <span style="font-family:&#39;微软雅黑&#39;;"><img alt="" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-6db3ecd7a372b835f0b66c53ba94a708.png"></span>
</div>
<div>
  <span style="font-family:&#39;微软雅黑&#39;;">首先是对控件的主体DateWeekMouthDateField.mxml进行分析,代码如下</span>
</div>
<div>
  <div class="cnblogs_code">
   <pre class="blockcode">&lt;?xml version&#61;<span style="color:#ff0000;">&#34;1.0&#34;</span> encoding&#61;<span style="color:#ff0000;">&#34;utf-8&#34;</span>?&gt;
&lt;s:BorderContainer xmlns:fx&#61;<span style="color:#ff0000;">&#34;http://ns.adobe.com/mxml/2009&#34;</span><span style="color:#000000;">
                   xmlns:s</span>&#61;<span style="color:#ff0000;">&#34;library://ns.adobe.com/flex/spark&#34;</span><span style="color:#000000;">
                   xmlns:mx</span>&#61;<span style="color:#ff0000;">&#34;library://ns.adobe.com/flex/mx&#34;</span><span style="color:#000000;">
                   width</span>&#61;<span style="color:#ff0000;">&#34;100%&#34;</span> height&#61;<span style="color:#ff0000;">&#34;100%&#34;</span> backgroundAlpha&#61;<span style="color:#ff0000;">&#34;0&#34;</span><span style="color:#000000;">
                   borderVisible</span>&#61;<span style="color:#ff0000;">&#34;false&#34;</span><span style="color:#000000;">
                   buttonMode</span>&#61;<span style="color:#ff0000;">&#34;true&#34;</span> useHandCursor&#61;<span style="color:#ff0000;">&#34;true&#34;</span><span style="color:#000000;">
                   creationComplete</span>&#61;<span style="color:#ff0000;">&#34;init();&#34;</span><span style="color:#000000;">
                   click</span>&#61;<span style="color:#ff0000;">&#34;popUpButton.open();&#34;</span>&gt;
   
    &lt;fx:Style source&#61;<span style="color:#ff0000;">&#34;css/tabNavigator.css&#34;/</span>&gt;
    &lt;fx:Script&gt;
        &lt;!<span style="color:#000000;">[CDATA[
            </span><span style="color:#0000ff;">import</span><span style="color:#000000;"> DateField.component.DateChoosers;
            </span><span style="color:#0000ff;">import</span><span style="color:#000000;"> DateField.event.DateFieldChooseEvent;
            
            [Embed(source</span>&#61;<span style="color:#ff0000;">&#34;DateField/images/leftIcon.png&#34;</span><span style="color:#000000;">)]
            </span><span style="color:#0000ff;">private</span> <span style="color:#0000ff;">var</span><span style="color:#000000;"> leftIcon:Class;
            [Embed(source</span>&#61;<span style="color:#ff0000;">&#34;DateField/images/rightIcon.png&#34;</span><span style="color:#000000;">)]
            </span><span style="color:#0000ff;">private</span> <span style="color:#0000ff;">var</span><span style="color:#000000;"> rightIcon:Class;
            </span><span style="color:#0000ff;">public</span> <span style="color:#0000ff;">var</span> dateChoosers:DateChoosers &#61; <span style="color:#0000ff;">new</span><span style="color:#000000;"> DateChoosers();;
            </span><span style="color:#008000;">/*</span><span style="color:#008000;">*
             * 初始化导航菜单组
             * </span><span style="color:#008000;">*/</span>
            <span style="color:#0000ff;">private</span> <span style="color:#008000;">function</span> init():<span style="color:#0000ff;">void</span><span style="color:#000000;">
            {   
               
            
分享到 :
0 人收藏
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

积分:3875789
帖子:775174
精华:0
期权论坛 期权论坛
发布
内容

下载期权论坛手机APP