前段时间要用到带时分秒的flex日历选择器。到网上找了些资料,再自己改改,有了以下成果:
以下是所有代码:
myDateChooser.cs
- package nmsDateField
- {
- import mx.controls.DateChooser;
- //重写DateChooser,添加了时分秒的选择
- public class myDateChooser extends DateChooser
- {
- public var times:myTimesChoose;
- public function myDateChooser()
- {
- super();
- this.width=195;
- this.height=195;
- this.setStyle("fontSize", "12");
- times=new myTimesChoose();
- times.x=0;
- times.y=this.height;
- }
- protected override function createChildren():void
- {
- super.createChildren();
- addChild(times);
- }
- }
- }
myTimesChoose.cs
- 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=["00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23"];
- //分钟和秒
- 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"];
- //时分秒下拉框的填充色
- private var arryBackgroundColor:Array=["white", "white", "white", "white"];
- public function myTimesChoose()
- {
- super();
- this.width=195;
- this.height=23;
- this.setStyle("headerHeight", 0);
- this.setStyle("borderStyle", "solid");
- this.setStyle("borderThicknessLeft", 1);
- this.setStyle("borderThicknessRight", 1);
- this.setStyle("cornerRadius", 0);
- timesBox=new HBox();
- timesBox.setStyle("horizontalGap", "0");
- timesBox.setStyle("verticalGap", "0");
- timesBox.setStyle("verticalAlign", "middle");
- timesBox.setStyle("backgroundColor", "white");
- timesBox.setStyle("paddingLeft", "5");
- timesBox.setStyle("paddingBottom", "2");
- timesBox.setStyle("borderStyle", "none");
- }
- protected override function createChildren():void
- {
- super.createChildren();
- if (!nmsHour)
- {
- nmsHour=new ComboBox();
- nmsHour.width=55;
- nmsHour.height=18;
- nmsHour.dataProvider=dataSourceHour;
- nmsHour.setStyle("cornerRadius", "0");
- nmsHour.setStyle("fontSize", "10");
- nmsHour.setStyle("fillColors", arryBackgroundColor);
- nmsHour.addEventListener("change", updateValue);
- }
- if (!labMinute)
- {
- labMinute=new Label();
- labMinute.width=10;
- labMinute.text=":";
- }
- if (!nmsMinute)
- {
- nmsMinute=new ComboBox();
- nmsMinute.width=55;
- nmsMinute.height=18;
- nmsMinute.dataProvider=dataSourceMinuteSecond;
- nmsMinute.setStyle("fontSize", "10");
- nmsMinute.setStyle("cornerRadius", "0");
- nmsMinute.setStyle("fillColors", arryBackgroundColor);
- nmsMinute.addEventListener("change", updateValue);
- }
- if (!labSecond)
- {
- labSecond=new Label();
- labSecond.width=10;
- labSecond.text=":";
- }
- if (!nmsSecond)
- {
- nmsSecond=new ComboBox();
- nmsSecond.width=55;
- nmsSecond.height=18;
- nmsSecond.setStyle("fontSize", "10");
- nmsSecond.setStyle("cornerRadius", "0");
- nmsSecond.setStyle("fillColors", arryBackgroundColor);
- nmsSecond.dataProvider=dataSourceMinuteSecond;
- nmsSecond.addEventListener("change", 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="YYYY-MM-DD JJ:NN:SS";
- var times:String=df.format(date);
- return times;
- }
- }
- }
myDateField.cs
- 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="YYYY-MM-DD";
- this.dayNames=["日", "一", "二", "三", "四", "五", "六"];
- this.monthNames=["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"];
- 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="YYYY-MM-DD JJ:NN:SS";
- 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();
- }
- }
- }
- }
nmsDateField.mxml
- <?xml version="1.0" encoding="utf-8"?>
- <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:nmsDateField="nmsDateField.*">
- <mx:Style>
- DateChooser{
- cornerRadius: 0;
- }
- </mx:Style>
- <nmsDateField:myDateField />
- </mx:Application>
OK,结束了。几乎没有任何bug。(有一个。。)
源码下载链接;
http://download.csdn.net/detail/lee_541/3733099