加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 （https://www.lidatong.com.cn/）- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置： 首页 > 百科 > 正文

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

发布时间：2020-12-15 01:04:15 所属栏目：百科 来源：网络整理
导读：? 前段时间要用到带时分秒的flex日历选择器。到网上找了些资料，再自己改改，有了以下成果： 以下是所有代码： myDateChooser.cs view plain copy to clipboard print ? package ?nmsDateField?? {?? ???? import ?mx.controls.DateChooser;?? ?? ???? //重
?

前段时间要用到带时分秒的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",?"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"];??
  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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
    相关内容
      推荐文章
        站长推荐
        热点阅读

          【免责声明】本站内容转载自互联网，其发布内容言论不代表本站观点，如果其链接、内容的侵犯您的权益，烦请提交相关链接至邮箱bqsm@foxmail.com我们将及时予以处理。

          建议您使用1920×1080分辨率、谷歌浏览器Google Chrome、Microsoft Edge以获得本站的最佳浏览效果

          Copygight © 2008-2022 https://www.lidatong.com.cn/ All Rights Reserved. 李大同