[置顶] flex DateField 实现日期和年份可以下拉式
用了几个小时终于搞定
现将代码贴上,
<?xml version="1.0" encoding="utf-8"?>
<mx:DateChooser xmlns:mx="http://www.adobe.com/2006/mxml" width="245" height="190" creationComplete="onCreationComplete()">
<mx:Script>
<![CDATA[
import mx.controls.Button;
import mx.controls.Alert;
import mx.events.DateChooserEventDetail;
import mx.events.DateChooserEvent;
import mx.events.CalendarLayoutChangeEvent;
[Bindable]
public var arYears:Array = [];
/**
* onCreationComplete
*
* @access public
* @param void
* @return void
*/
public function onCreationComplete() : void
{
this.arYears = [];
for(var i:int = 1900;i < 2301;i ++)
this.arYears.push(i.toString());
setChange();
}
public function setChange() : void
{
try
{
var currentDate : Date = this.selectedDate == null?new Date():this.selectedDate;
// simple init
this.months.selectedIndex = currentDate.getMonth();
this.years.selectedItem = currentDate.getFullYear().toString();
}catch(e:Error){}
}
public override function set selectedDate(value:Date):void
{
try
{
super.selectedDate=value;
setChange();
}catch(e:Error){}
}
protected override function createChildren():void
{
try
{
super.createChildren();
addChild(months);
addChild(years);
this.addEventListener(DateChooserEvent.SCROLL, onChangeMonth);
this.addEventListener(CalendarLayoutChangeEvent.CHANGE, dateGrid_changeHandler);
// this.addEventListener(CalendarLayoutChangeEvent.CHANGE, dateGrid_changeHandler);
}catch(e:Error){}
}
private function dateGrid_changeHandler(event:CalendarLayoutChangeEvent):void
{
setChange();
}
/**
* onChangeMonth
*
* @access private
* @param DateChooserEvent
* @return void
*/
public function onChangeMonth( event : DateChooserEvent ) : void
{
if (event.detail == DateChooserEventDetail.NEXT_MONTH)
this.months.selectedIndex++;
if (event.detail == DateChooserEventDetail.PREVIOUS_MONTH)
this.months.selectedIndex--;
//mx.controls.Alert.show((event.triggerEvent.currentTarget as Button).id.toString());
if (event.detail == DateChooserEventDetail.PREVIOUS_YEAR) {
this.months.selectedIndex = 11;
this.years.selectedIndex--;
}
if (event.detail == DateChooserEventDetail.NEXT_YEAR) {
this.months.selectedIndex = 0;
this.years.selectedIndex++;
}
}
/**
* onChangeDropDownMonth
*
* @access private
* @param Event event
* @return void
*/
private function onChangeDropDownMonth( event : Event ) : void
{
this.displayedMonth = (this.months.selectedIndex as Number);
}
/**
* onChangeDropDownYears
*
* @access private
* @param Event event
* @return void
*/
private function onChangeDropDownYears( event : Event ) : void
{
this.displayedYear = this.years.selectedItem.toString();
}
]]>
</mx:Script>
<!--mx:DateChooser id="calend" name="calendar" width="245" height="190" /-->
<mx:ComboBox id="months" x="26" y="15" width="105" change="onChangeDropDownMonth(event)">
<mx:ArrayCollection>
['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月']
</mx:ArrayCollection>
</mx:ComboBox>
<mx:ComboBox id="years" x="155" y="15" width="75" change="onChangeDropDownYears(event);">
<mx:ArrayCollection source="{arYears}"/>
</mx:ComboBox>
</mx:DateChooser>
package app.lib.components
{
import flash.system.IME;
import mx.controls.DateField;
import mx.core.ClassFactory;
import mx.events.DateChooserEvent;
public class MyDateField extends DateField
{
public var chooser:calendar;
public function MyDateField()
{
super();
this.formatString="YYYY年MM月DD";
this.yearNavigationEnabled = false;
this.firstDayOfWeek=1;
this.dayNames=["日","一","二","三","四","五","六"];
this.monthNames=["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"];
this.dropdownFactory=new ClassFactory(calendar);
this.addEventListener("focusIn",function():void{IME.enabled=false;});
this.addEventListener("focusOut",function():void{IME.enabled=true;focusOutDateField()});
this.addEventListener("change",onChangeMonth);
}
public function onChangeMonth( ) : void
{
this.dropdown.selectedDate = this.selectedDate;
}
[Bindable]
public var startDate:Date;
[Bindable]
public var endDate:Date;
public var dateFlg:Boolean;
private function focusOutDateField():void{
if(this.text != ""&&this.text !=null){
dateFlg = true;
this.text = replaceAll(this.text);//Y年MM月DD日
//this.text = replaceAll(this.text,"-");
this.text = replaceAll(this.text,"年");
this.text = replaceAll(this.text,"月");
this.text = replaceAll(this.text,"日");
// this.text = replaceAll(this.text,"\");
var yearMy:Number = Number(this.text.substr(0,4));
var monthMy:Number = Number(this.text.substr(4,2));
var dayMy:Number = Number(this.text.substr(6,2));
var yearStr:String = this.text.substr(0,4);
var monthStr:String = this.text.substr(4,2);
var dayStr:String = this.text.substr(6,2);
if(yearMy > 2300){
yearStr = '2300';
yearMy = 2300;
dateFlg = false;
}
if(yearMy < 1900){
yearStr = '1900';
yearMy = 1900;
dateFlg = false;
}
var bool:Boolean = ((yearMy%4 == 0) && (yearMy%100 != 0)) || (yearMy%400 == 0) ? true : false;
if(monthMy < 1 || monthMy > 12){
monthStr = '01';
monthMy = 1;
dateFlg = false;
}else if(monthMy < 10){
monthStr = "0" + monthMy;
}
if(dayMy >= 1 && dayMy < 10){
dayStr = "0" + dayMy;
}
switch(monthMy){
case 1:
case 3:
case 5:
case 7:
case 8:
case 10:
case 12:
if(dayMy < 1 || dayMy > 31 ){
dayStr = '01';
dateFlg = false;
}
break;
case 4:
case 6:
case 9:
case 11:
if(dayMy < 1 || dayMy > 30 ){
dayStr = '01';
dateFlg = false;
}
break;
case 2:
if(bool){
if(dayMy < 1 || dayMy > 29){
dayStr = '01';
dateFlg = false;
}
}else{
if(dayMy < 1 || dayMy > 28){
dayStr = '01';
dateFlg = false;
}
}
break;
}
if(dayStr == ""){
dayStr = "01";
dateFlg = false;
}
this.text = yearStr + monthStr + dayStr;
if(this.text.length == 8){
textSub();
}
}
}
private function textSub():void{
/* if(!dateFlg){
this.selectedDate = null;
this.text = null;
this.startDate = null;
this.endDate = null;
}
else
{*/
var myDate:Date = new Date();
myDate.setFullYear(Number(this.text.substr(0,4)),Number(this.text.substr(4,2))-1,Number(this.text.substr(6,2)) );
this.selectedDate = myDate;
this.text = this.text.substr(0,4) + "年" + this.text.substr(4,2) + "月" + this.text.substr(6,2);
// }
}
private function replaceAll(str:String,match:String="-"):String
{
while(str.search(match) != -1)
{
str = str.replace(match,"");
}
return str;
}
}
}
示例:跟DateField用法一样,最好给个 selectedDate
<components:MyDateField selectedDate="{new Date()}" editable="false" yearNavigationEnabled="false" />