最近在研究flex这项技术,嘿嘿,这项技术很有意思,嘿嘿,在flex中没有现成的日期时间控件,于是我研究一些网上的代码,写了一个控件,这个控件就实现了日期和时间的显示,代码如下:
?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:eshangrao="com.systex.fp.jobschedule.util.*"
height="22" width="207" initialize="initDateField()" >
<mx:Script>
<![CDATA[
import mx.events.DateChooserEvent;
import mx.events.CalendarLayoutChangeEvent;
import mx.events.DropdownEvent;
import mx.formatters.DateFormatter;
import mx.controls.Alert;
public function initDateField():void
{
var nowDate:String =new Date().getFullYear()+"/"+(new Date().getMonth()+1)+"/"+ new Date().getDate();
var dateFormatter1:DateFormatter = new DateFormatter();
dateFormatter1.formatString = "YYYY/MM/DD ";
data1.text = dateFormatter1.format(nowDate);
}
public function initDateFormatter():void
{
var dateFormatter1:DateFormatter = new DateFormatter();
dateFormatter1.formatString = "YYYY/MM/DD ";
data1.text = dateFormatter1.format(data1.text);
}
]]>
</mx:Script>
<eshangrao:TimeInput hours="{new Date().getHours()}" minutes="{new Date().getMinutes()}" id="timeInput" x="137"/>
<mx:DateField width="129" id="data1" x="0" change="initDateFormatter()" />
</mx:Canvas>
说明:
initDateFormatter这个方法主要实现了根据DateField 控件,将用户选择的日期格式进行格式化,DateField 默认的格式为日月年,如果涉及数据库的时候需要的是年月日,所以我们就要实现转换格式。
initDateField实现初始化页面时,将控件的内容为显示为当前的日期和时间。
使用方法:在使用上可以使用data1.text属性得到用户选择的日期,
使用timeInput.hours获得用户选择的时间
使用timeInput.minutes获得用户选择的分钟
还需要 TimeInput。as文件 路径为 com.systex.fp.jobschedule.util。
代码如下package com.systex.fp.jobschedule.util
{
import flash.events.Event;
import flash.events.FocusEvent;
import flash.text.TextLineMetrics;
import mx.containers.HBox;
import mx.controls.NumericStepper;
import mx.controls.Text;
import mx.controls.TextInput;
import mx.core.UITextField;
import mx.core.mx_internal;
import mx.events.FlexEvent;
import mx.managers.IFocusManager;
use namespace mx_internal;
[Event(name="change",type="flash.events.Event")]
[Event(name="hoursChange",type="flash.events.Event")]
[Event(name="minutesChange",type="flash.events.Event")]
public class TimeInput extends NumericStepper
{
public function TimeInput()
{
super();
this.maxChars=2;
this.minimum=0;
this.maximum=23;
this.stepSize=1;
this.addEventListener(FlexEvent.VALUE_COMMIT,valueCommandHandler);
}
protected var inputBox:HBox;
protected var sText:Text;
protected var hoursInputField:TextInput;
protected var minutesInputField:TextInput;
protected var _hours:Number = 0;
protected var _minutes:Number = 30;
protected var _timeDate;
private var _enabled:Boolean=true;
override protected function createChildren():void
{
super.createChildren();
if(!inputBox)
{
inputBox=new HBox();
inputBox.setStyle("paddingLeft",0);
inputBox.setStyle("paddingRight",0);
inputBox.setStyle("paddingTop",0);
inputBox.setStyle("paddingBottom",0);
inputBox.setStyle("horizontalGap",0);
inputBox.setStyle("borderStyle","solid");
inputBox.setStyle("verticalAlign","middle");
addChild(inputBox);
}
var widestNumber:Number=61;
var lineMetrics:TextLineMetrics = measureText(widestNumber.toString());
var textWidth:Number = lineMetrics.width + UITextField.TEXT_WIDTH_PADDING+4;
if (!hoursInputField)
{
hoursInputField = new TextInput();
hoursInputField.focusEnabled = false;
hoursInputField.styleName = this;
hoursInputField.width=textWidth;
hoursInputField.restrict = "0-9";
hoursInputField.maxChars = 2;
hoursInputField.text = StringToolkit.formatNumberWithChar(_hours,2,"0");