带时分秒的flex3日历选择器---完善版

最新推荐文章于 2014-11-06 09:29:30 发布
最新推荐文章于 2014-11-06 09:29:30 发布
阅读量650 收藏
点赞数
文章标签： 日历 flex date function string encoding
 

前段时间要用到带时分秒的flex日历选择器。到网上找了些资料，再自己改改，有了以下成果：











以下是所有代码：

myDateChooser.cs

view plain copy to clipboard print ?
  1. package nmsDateField  
  2. {  
  3.     import mx.controls.DateChooser;  
  4.   
  5.     //重写DateChooser,添加了时分秒的选择   
  6.     public class myDateChooser extends DateChooser  
  7.     {  
  8.         public var times:myTimesChoose;  
  9.   
  10.         public function myDateChooser()  
  11.         {  
  12.             super();  
  13.   
  14.             this.width=195;  
  15.             this.height=195;  
  16.             this.setStyle("fontSize", "12");  
  17.             times=new myTimesChoose();  
  18.             times.x=0;  
  19.             times.y=this.height;  
  20.         }  
  21.   
  22.         protected override function createChildren():void  
  23.         {  
  24.             super.createChildren();  
  25.             addChild(times);  
  26.         }  
  27.     }  
  28. }  

myTimesChoose.cs

view plain copy to clipboard print ?
  1. package nmsDateField  
  2. {  
  3.     import flash.events.Event;  
  4.   
  5.     import mx.containers.HBox;  
  6.     import mx.containers.Panel;  
  7.     import mx.controls.ComboBox;  
  8.     import mx.controls.Label;  
  9.     import mx.formatters.DateFormatter;  
  10.   
  11.     //重写Panel,实现时分秒的选择   
  12.     public class myTimesChoose extends Panel  
  13.     {  
  14.         public var timesBox:HBox;  
  15.   
  16.         public var labMinute:Label;  
  17.         public var labSecond:Label;  
  18.   
  19.         //时分秒下拉框   
  20.         public var nmsHour:ComboBox;  
  21.         public var nmsMinute:ComboBox;  
  22.         public var nmsSecond:ComboBox;  
  23.   
  24.         private var parseDate:Date;  
  25.   
  26.         //小时   
  27.         private var dataSourceHour:Array=["00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23"];  
  28.   
  29.         //分钟和秒   
  30.         private var dataSourceMinuteSecond:Array=["00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "40", "41", "42", "43", "44", "45", "46", "47", "48", "49", "50", "51", "52", "53", "54", "55", "56", "57", "58", "59"];  
  31.   
  32.         //时分秒下拉框的填充色   
  33.         private var arryBackgroundColor:Array=["white", "white", "white", "white"];  
  34.   
  35.         public function myTimesChoose()  
  36.         {  
  37.             super();  
  38.             this.width=195;  
  39.             this.height=23;  
  40.   
  41.             this.setStyle("headerHeight", 0);  
  42.             this.setStyle("borderStyle", "solid");  
  43.             this.setStyle("borderThicknessLeft", 1);  
  44.             this.setStyle("borderThicknessRight", 1);  
  45.             this.setStyle("cornerRadius", 0);  
  46.   
  47.             timesBox=new HBox();  
  48.             timesBox.setStyle("horizontalGap", "0");  
  49.             timesBox.setStyle("verticalGap", "0");  
  50.             timesBox.setStyle("verticalAlign", "middle");  
  51.             timesBox.setStyle("backgroundColor", "white");  
  52.             timesBox.setStyle("paddingLeft", "5");  
  53.             timesBox.setStyle("paddingBottom", "2");  
  54.             timesBox.setStyle("borderStyle", "none");  
  55.         }  
  56.   
  57.         protected override function createChildren():void  
  58.         {  
  59.             super.createChildren();  
  60.   
  61.             if (!nmsHour)  
  62.             {  
  63.                 nmsHour=new ComboBox();  
  64.                 nmsHour.width=55;  
  65.                 nmsHour.height=18;  
  66.                 nmsHour.dataProvider=dataSourceHour;  
  67.                 nmsHour.setStyle("cornerRadius", "0");  
  68.                 nmsHour.setStyle("fontSize", "10");  
  69.                 nmsHour.setStyle("fillColors", arryBackgroundColor);  
  70.                 nmsHour.addEventListener("change", updateValue);  
  71.             }  
  72.   
  73.             if (!labMinute)  
  74.             {  
  75.                 labMinute=new Label();  
  76.                 labMinute.width=10;  
  77.                 labMinute.text=":";  
  78.             }  
  79.   
  80.             if (!nmsMinute)  
  81.             {  
  82.                 nmsMinute=new ComboBox();  
  83.                 nmsMinute.width=55;  
  84.                 nmsMinute.height=18;  
  85.                 nmsMinute.dataProvider=dataSourceMinuteSecond;  
  86.                 nmsMinute.setStyle("fontSize", "10");  
  87.                 nmsMinute.setStyle("cornerRadius", "0");  
  88.                 nmsMinute.setStyle("fillColors", arryBackgroundColor);  
  89.                 nmsMinute.addEventListener("change", updateValue);  
  90.             }  
  91.   
  92.             if (!labSecond)  
  93.             {  
  94.                 labSecond=new Label();  
  95.                 labSecond.width=10;  
  96.                 labSecond.text=":";  
  97.             }  
  98.   
  99.             if (!nmsSecond)  
  100.             {  
  101.                 nmsSecond=new ComboBox();  
  102.                 nmsSecond.width=55;  
  103.                 nmsSecond.height=18;  
  104.                 nmsSecond.setStyle("fontSize", "10");  
  105.                 nmsSecond.setStyle("cornerRadius", "0");  
  106.                 nmsSecond.setStyle("fillColors", arryBackgroundColor);  
  107.                 nmsSecond.dataProvider=dataSourceMinuteSecond;  
  108.                 nmsSecond.addEventListener("change", updateValue);  
  109.             }  
  110.   
  111.             timesBox.addChild(nmsHour);  
  112.             timesBox.addChild(labMinute);  
  113.             timesBox.addChild(nmsMinute);  
  114.             timesBox.addChild(labSecond);  
  115.             timesBox.addChild(nmsSecond);  
  116.   
  117.             this.addChild(timesBox);  
  118.         }  
  119.   
  120.         //当下拉时分秒下拉框的值改变的时候，动态修改日期控制的textinput的显示值   
  121.         private function updateValue(event:Event):void  
  122.         {  
  123.             if (this.parent is myDateChooser)  
  124.             {  
  125.                 var dateChooser:myDateChooser=this.parent as myDateChooser;  
  126.                 //若没有选择日期则默认为当天   
  127.                 if (dateChooser.selectedDate == null)  
  128.                 {  
  129.                     parseDate=new Date();  
  130.                 }  
  131.                 else  
  132.                 {  
  133.                     parseDate=dateChooser.selectedDate;  
  134.                 }  
  135.   
  136.                 if (dateChooser.owner is myDateField)  
  137.                 {  
  138.                     var dateField:myDateField=dateChooser.owner as myDateField;  
  139.                     dateField.labelFunction=formatDateTemp;  
  140.                 }  
  141.             }  
  142.         }  
  143.   
  144.         //日期显示格式   
  145.         private function formatDateTemp(date:Date):String  
  146.         {  
  147.             if (date == null)  
  148.             {  
  149.                 date=new Date();  
  150.             }  
  151.   
  152.             date.hours=(Number)(nmsHour.selectedItem);  
  153.             date.minutes=(Number)(nmsMinute.selectedItem);  
  154.             date.seconds=(Number)(nmsSecond.selectedItem);  
  155.   
  156.             var df:DateFormatter=new DateFormatter();  
  157.             df.formatString="YYYY-MM-DD JJ:NN:SS";  
  158.   
  159.             var times:String=df.format(date);  
  160.   
  161.             return times;  
  162.         }  
  163.     }  
  164. }  

myDateField.cs


view plain copy to clipboard print ?
  1. package nmsDateField  
  2. {  
  3.     import flash.events.KeyboardEvent;  
  4.     import flash.ui.Keyboard;  
  5.   
  6.     import mx.controls.DateField;  
  7.     import mx.core.ClassFactory;  
  8.     import mx.events.CalendarLayoutChangeEvent;  
  9.     import mx.formatters.DateFormatter;  
  10.   
  11.     //重写DateField,设置默认中文显示,添加了时分秒的选择   
  12.     public class myDateField extends DateField  
  13.     {  
  14.         public function myDateField()  
  15.         {  
  16.             super();  
  17.             this.formatString="YYYY-MM-DD";  
  18.             this.dayNames=["日", "一", "二", "三", "四", "五", "六"];  
  19.             this.monthNames=["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"];  
  20.             this.dropdownFactory=new ClassFactory(myDateChooser);  
  21.             this.labelFunction=formatDate;  
  22.             this.editable=false;  
  23.             this.addEventListener(CalendarLayoutChangeEvent.CHANGE, showDateChooser);  
  24.             this.addEventListener(KeyboardEvent.KEY_DOWN, handelKeyDown);  
  25.         }  
  26.   
  27.         private function formatDate(currentDate:Date):String  
  28.         {  
  29.             var dateFormatter:DateFormatter=new DateFormatter();  
  30.             //YYYY-MM-DD JJ:NN:SS此中JJ表示格式位0-23。若换成HH则显示格式位0-24.   
  31.             dateFormatter.formatString="YYYY-MM-DD JJ:NN:SS";  
  32.   
  33.             var times:String=dateFormatter.format(currentDate);  
  34.             return times;  
  35.         }  
  36.           
  37.         //当选择日期时，日历选择器在打开（默认选择日期后就回关闭）   
  38.         private function showDateChooser(event:CalendarLayoutChangeEvent):void  
  39.         {  
  40.             this.open();  
  41.         }  
  42.           
  43.         //此处处理在时分秒下拉框出现时，按下回车键，下拉框不会收回去的bug   
  44.         private function handelKeyDown(event:KeyboardEvent):void  
  45.         {  
  46.             if (event.keyCode == Keyboard.ENTER)  
  47.             {  
  48.                 var tempNmsDateChooser:myDateChooser=this.dropdown as myDateChooser;  
  49.                 tempNmsDateChooser.times.nmsHour.close();  
  50.                 tempNmsDateChooser.times.nmsMinute.close();  
  51.                 tempNmsDateChooser.times.nmsSecond.close();  
  52.             }  
  53.         }  
  54.     }  
  55. }  

nmsDateField.mxml

view plain copy to clipboard print ?
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:nmsDateField="nmsDateField.*">  
  3.     <mx:Style>  
  4.         DateChooser{  
  5.             cornerRadius: 0;  
  6.         }  
  7.     </mx:Style>  
  8.     <nmsDateField:myDateField />  
  9. </mx:Application>  

OK,结束了。几乎没有任何bug。（有一个。。）


源码下载链接；

http://download.csdn.net/detail/lee_541/3733099

hongtashan11
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
AS3日历控制
02-17
ActionScript3日历控制组件,上传一个用于学习
完整的日历控件，可以直接运行 as3.0
08-28
Flash 3.0写的可以直接运行的日历控件
AS3.0相关知识
wangangie7
07-01 129
　　as3.0 　　2010-01-06 00:21 　　继承 继承是指一种代码重用的形式，允许程序员基于现有类开发新类。现有类通常称为"基类"或"超类"，新类通常称为"子类"。继承的主要优势是，允许重复使用基类中的代码，但不修改现有代码。此外，继承不要求改变其它类与基类交互的方式。不必修改可能已经过彻底测试或可能已被使用的现有类，使用继承可将该类视为一个集成模块，可使用其它属性或方法...
flex带时分秒日历---完善版
10-29
flex带时分秒日历。几乎没有任何问题。
Flex-时间控件，带年月日时分秒
01-01
Flex-时间控件，带年月日时分秒,本人一直用的一个控件，一个无BUG的好东西哦
Flex电源模块推出超宽输入DC-DC转换器
01-20
　Flex电源模块（Flex Power Modules）现面向工业和铁路行业推出PKE-A系列DC-DC电源模块，进而扩大其产品范围，以便满足这些行业不断增长的需求。该模块采用密封和包封封装，可确保其在遭受灰尘、潮湿、剧烈振动和...
flex-messaging-4.7.3最新版本的jar
06-02
flex-messaging-4.7.3最新版本的jar
CSS3 Flexbox中flex-shrink属性的用法示例介绍
09-25
当flex items的大小超过了flex container时， 各个flex item的压缩比例，下面有个不错的教程，大家可以参考下
详解CSS中的display:flex||inline-flex属性
09-27
主要给大家介绍了CSS中的display:flex和display:inline-flex属性，文中分别通过两段实例代码给大家介绍了display:flex和display:inline-flex的使用效果，感兴趣的朋友们可以参考借鉴，下面来一起看看吧。
Flex4 DateField自定义的日期选择控件，可选择时分秒
luckypeng的专栏
11-06 3063
YJQDateField.mxml [html] view plaincopy xml version="1.0" encoding="utf-8"?>   s:HGroup xmlns:fx="http://ns.adobe.com/mxml/2009"        xmlns:s="library://ns.adobe.com/flex
flex可选择时间的日历控件
01-11
flex自带的日期控件是没有时间选择的,本控件集成了时间的选择,另外时间的选择实现了可手动输入,输入的值可以定位下拉列表框. 导入方便,引用方便,提供多种输出格式. 经过测试完全OK,并且该控件已经应用于我们公司的各个flex项目当中,所以大家可以完全无需担心出现什么问题.
Flex日期选择器组件(带年月日时分妙)
05-14
因为flex提供的有日期组件，但是只有年月日，没有时分妙，又不是很好看。开发了一个Flex日期选择器组件(带年月日时分妙)，若哪里需要用到日期选择器组件，把DateField.swc文件拷贝到Flex项目的libs文件夹内，引用util.dateField包下的DateFieldComp组件即可。 用组件的id.text可获得组件的日期。
可选择时分秒的日历控件
04-10
可选择时分秒的日历控件,兼容性很好，使用简单！导入一个js 使用一句话就可以让空间选择日期！想使用时分秒就使用时分秒。只需要简单配置就OK了
Flex带时间的日期控件
05-13
Flex带时间的日期控件，样式和官方的一样，好看精简
Flash as3万年历(农历)
04-20
最近需要一个万年历，找了很多都不太满意~索性自己做个~分享给大家一下~FB项目的源文件，支持农历和节气~
as3自定义日历
zhaozhao110的专栏
10-14 970
/**当前星期的x坐标**/     public var weekXPosition:Array=[288,0,48,96,144,192,240]   /**当前星期的y坐标**/     public var weekYPosition:Array=[0,23,46,69,92,115]   public var weekData:Array=["周一    ","周二    ",
flex 有时分秒的日期控件
09-17
flex 有时分秒的日期控件，该控件对dateField功能上进行了扩展，可以设置时分秒
FLASH日历原文件。AS3.0版本
09-27
FLASH日历原文件。AS3.0版本 DateChooser.as DateShape.as SuperCalendar.as ToolTip.as
Flex实现自定义中文日期选择(mx:DateField)
生*活
10-23 222
 Flex实现自定义中文日期选择运行效果见：http://tongqiuyan.blog.163.com/blog/static/195545302201192342650121/   静态效果如下：   &lt;mx:DateField id="dateField" width="120" yearNavigationEnabled="{checkBox.selected}" sel...
flex-end：和flex-direction: row-reverse;解释
最新发布
01-27
flex-end属性用于设置子元素在主轴上的对齐方式，使其靠近主轴的结束位置。而flex-direction: row-reverse;属性用于设置主轴的方向为从右到左。 举个例子，假设有一个父容器，其中包含三个子元素。当设置flex-...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值