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

 

前段时间要用到带时分秒的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. }  
<textarea class="java" style="DISPLAY: none" name="code" readonly="readonly">package nmsDateField { &nbsp;&nbsp; &nbsp;import mx.controls.DateChooser; &nbsp;&nbsp; &nbsp;//重写DateChooser,添加了时分秒的选择 &nbsp;&nbsp; &nbsp;public class myDateChooser extends DateChooser &nbsp;&nbsp; &nbsp;{ &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;public var times:myTimesChoose; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;public function myDateChooser() &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;{ &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;super(); &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;this.width=195; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;this.height=195; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;this.setStyle(&quot;fontSize&quot;, &quot;12&quot;); &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;times=new myTimesChoose(); &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;times.x=0; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;times.y=this.height; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;} &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;protected override function createChildren():void &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;{ &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;super.createChildren(); &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;addChild(times); &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;} &nbsp;&nbsp; &nbsp;} }</textarea>

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. }  
<textarea class="java" style="DISPLAY: none" name="code" readonly="readonly">package nmsDateField { import flash.events.Event; import mx.containers.HBox; import mx.containers.Panel; import mx.controls.ComboBox; import mx.controls.Label; import mx.formatters.DateFormatter; //重写Panel,实现时分秒的选择 public class myTimesChoose extends Panel { public var timesBox:HBox; public var labMinute:Label; public var labSecond:Label; //时分秒下拉框 public var nmsHour:ComboBox; public var nmsMinute:ComboBox; public var nmsSecond:ComboBox; private var parseDate:Date; //小时 private var dataSourceHour:Array=[&quot;00&quot;, &quot;01&quot;, &quot;02&quot;, &quot;03&quot;, &quot;04&quot;, &quot;05&quot;, &quot;06&quot;, &quot;07&quot;, &quot;08&quot;, &quot;09&quot;, &quot;10&quot;, &quot;11&quot;, &quot;12&quot;, &quot;13&quot;, &quot;14&quot;, &quot;15&quot;, &quot;16&quot;, &quot;17&quot;, &quot;18&quot;, &quot;19&quot;, &quot;20&quot;, &quot;21&quot;, &quot;22&quot;, &quot;23&quot;]; //分钟和秒 private var dataSourceMinuteSecond:Array=[&quot;00&quot;, &quot;01&quot;, &quot;02&quot;, &quot;03&quot;, &quot;04&quot;, &quot;05&quot;, &quot;06&quot;, &quot;07&quot;, &quot;08&quot;, &quot;09&quot;, &quot;10&quot;, &quot;11&quot;, &quot;12&quot;, &quot;13&quot;, &quot;14&quot;, &quot;15&quot;, &quot;16&quot;, &quot;17&quot;, &quot;18&quot;, &quot;19&quot;, &quot;20&quot;, &quot;21&quot;, &quot;22&quot;, &quot;23&quot;, &quot;24&quot;, &quot;25&quot;, &quot;26&quot;, &quot;27&quot;, &quot;28&quot;, &quot;29&quot;, &quot;30&quot;, &quot;31&quot;, &quot;32&quot;, &quot;33&quot;, &quot;34&quot;, &quot;35&quot;, &quot;36&quot;, &quot;37&quot;, &quot;38&quot;, &quot;39&quot;, &quot;40&quot;, &quot;41&quot;, &quot;42&quot;, &quot;43&quot;, &quot;44&quot;, &quot;45&quot;, &quot;46&quot;, &quot;47&quot;, &quot;48&quot;, &quot;49&quot;, &quot;50&quot;, &quot;51&quot;, &quot;52&quot;, &quot;53&quot;, &quot;54&quot;, &quot;55&quot;, &quot;56&quot;, &quot;57&quot;, &quot;58&quot;, &quot;59&quot;]; //时分秒下拉框的填充色 private var arryBackgroundColor:Array=[&quot;white&quot;, &quot;white&quot;, &quot;white&quot;, &quot;white&quot;]; public function myTimesChoose() { super(); this.width=195; this.height=23; this.setStyle(&quot;headerHeight&quot;, 0); this.setStyle(&quot;borderStyle&quot;, &quot;solid&quot;); this.setStyle(&quot;borderThicknessLeft&quot;, 1); this.setStyle(&quot;borderThicknessRight&quot;, 1); this.setStyle(&quot;cornerRadius&quot;, 0); timesBox=new HBox(); timesBox.setStyle(&quot;horizontalGap&quot;, &quot;0&quot;); timesBox.setStyle(&quot;verticalGap&quot;, &quot;0&quot;); timesBox.setStyle(&quot;verticalAlign&quot;, &quot;middle&quot;); timesBox.setStyle(&quot;backgroundColor&quot;, &quot;white&quot;); timesBox.setStyle(&quot;paddingLeft&quot;, &quot;5&quot;); timesBox.setStyle(&quot;paddingBottom&quot;, &quot;2&quot;); timesBox.setStyle(&quot;borderStyle&quot;, &quot;none&quot;); } protected override function createChildren():void { super.createChildren(); if (!nmsHour) { nmsHour=new ComboBox(); nmsHour.width=55; nmsHour.height=18; nmsHour.dataProvider=dataSourceHour; nmsHour.setStyle(&quot;cornerRadius&quot;, &quot;0&quot;); nmsHour.setStyle(&quot;fontSize&quot;, &quot;10&quot;); nmsHour.setStyle(&quot;fillColors&quot;, arryBackgroundColor); nmsHour.addEventListener(&quot;change&quot;, updateValue); } if (!labMinute) { labMinute=new Label(); labMinute.width=10; labMinute.text=&quot;:&quot;; } if (!nmsMinute) { nmsMinute=new ComboBox(); nmsMinute.width=55; nmsMinute.height=18; nmsMinute.dataProvider=dataSourceMinuteSecond; nmsMinute.setStyle(&quot;fontSize&quot;, &quot;10&quot;); nmsMinute.setStyle(&quot;cornerRadius&quot;, &quot;0&quot;); nmsMinute.setStyle(&quot;fillColors&quot;, arryBackgroundColor); nmsMinute.addEventListener(&quot;change&quot;, updateValue); } if (!labSecond) { labSecond=new Label(); labSecond.width=10; labSecond.text=&quot;:&quot;; } if (!nmsSecond) { nmsSecond=new ComboBox(); nmsSecond.width=55; nmsSecond.height=18; nmsSecond.setStyle(&quot;fontSize&quot;, &quot;10&quot;); nmsSecond.setStyle(&quot;cornerRadius&quot;, &quot;0&quot;); nmsSecond.setStyle(&quot;fillColors&quot;, arryBackgroundColor); nmsSecond.dataProvider=dataSourceMinuteSecond; nmsSecond.addEventListener(&quot;change&quot;, updateValue); } timesBox.addChild(nmsHour); timesBox.addChild(labMinute); timesBox.addChild(nmsMinute); timesBox.addChild(labSecond); timesBox.addChild(nmsSecond); this.addChild(timesBox); } //当下拉时分秒下拉框的值改变的时候,动态修改日期控制的textinput的显示值 private function updateValue(event:Event):void { if (this.parent is myDateChooser) { var dateChooser:myDateChooser=this.parent as myDateChooser; //若没有选择日期则默认为当天 if (dateChooser.selectedDate == null) { parseDate=new Date(); } else { parseDate=dateChooser.selectedDate; } if (dateChooser.owner is myDateField) { var dateField:myDateField=dateChooser.owner as myDateField; dateField.labelFunction=formatDateTemp; } } } //日期显示格式 private function formatDateTemp(date:Date):String { if (date == null) { date=new Date(); } date.hours=(Number)(nmsHour.selectedItem); date.minutes=(Number)(nmsMinute.selectedItem); date.seconds=(Number)(nmsSecond.selectedItem); var df:DateFormatter=new DateFormatter(); df.formatString=&quot;YYYY-MM-DD JJ:NN:SS&quot;; var times:String=df.format(date); return times; } } }</textarea>

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. }  
<textarea class="java" style="DISPLAY: none" name="code" readonly="readonly">package nmsDateField { import flash.events.KeyboardEvent; import flash.ui.Keyboard; import mx.controls.DateField; import mx.core.ClassFactory; import mx.events.CalendarLayoutChangeEvent; import mx.formatters.DateFormatter; //重写DateField,设置默认中文显示,添加了时分秒的选择 public class myDateField extends DateField { public function myDateField() { super(); this.formatString=&quot;YYYY-MM-DD&quot;; this.dayNames=[&quot;日&quot;, &quot;一&quot;, &quot;二&quot;, &quot;三&quot;, &quot;四&quot;, &quot;五&quot;, &quot;六&quot;]; this.monthNames=[&quot;一月&quot;, &quot;二月&quot;, &quot;三月&quot;, &quot;四月&quot;, &quot;五月&quot;, &quot;六月&quot;, &quot;七月&quot;, &quot;八月&quot;, &quot;九月&quot;, &quot;十月&quot;, &quot;十一月&quot;, &quot;十二月&quot;]; this.dropdownFactory=new ClassFactory(myDateChooser); this.labelFunction=formatDate; this.editable=false; this.addEventListener(CalendarLayoutChangeEvent.CHANGE, showDateChooser); this.addEventListener(KeyboardEvent.KEY_DOWN, handelKeyDown); } private function formatDate(currentDate:Date):String { var dateFormatter:DateFormatter=new DateFormatter(); //YYYY-MM-DD JJ:NN:SS此中JJ表示格式位0-23。若换成HH则显示格式位0-24. dateFormatter.formatString=&quot;YYYY-MM-DD JJ:NN:SS&quot;; var times:String=dateFormatter.format(currentDate); return times; } //当选择日期时,日历选择器在打开(默认选择日期后就回关闭) private function showDateChooser(event:CalendarLayoutChangeEvent):void { this.open(); } //此处处理在时分秒下拉框出现时,按下回车键,下拉框不会收回去的bug private function handelKeyDown(event:KeyboardEvent):void { if (event.keyCode == Keyboard.ENTER) { var tempNmsDateChooser:myDateChooser=this.dropdown as myDateChooser; tempNmsDateChooser.times.nmsHour.close(); tempNmsDateChooser.times.nmsMinute.close(); tempNmsDateChooser.times.nmsSecond.close(); } } } }</textarea>

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>  
<textarea class="html" style="DISPLAY: none" name="code" readonly="readonly">&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt; &lt;mx:Application xmlns:mx=&quot;http://www.adobe.com/2006/mxml&quot; layout=&quot;absolute&quot; xmlns:nmsDateField=&quot;nmsDateField.*&quot;&gt; &lt;mx:Style&gt; DateChooser{ cornerRadius: 0; } &lt;/mx:Style&gt; &lt;nmsDateField:myDateField /&gt; &lt;/mx:Application&gt; </textarea>

OK,结束了。几乎没有任何bug。(有一个。。)


源码下载链接;

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

你可能感兴趣的:(带时分秒的flex3日历选择器---完善版)