Flex4 DateField自定义的日期选择控件，可选择时分秒

于 2015-08-28 17:27:24 发布
阅读量835 收藏
点赞数
分类专栏： EXT.JS EXT.NET 文章标签： flex4.0 EXT.NET datefield能选时分秒

YJQDateField.mxml

[html]  view plain copy
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <s:HGroup xmlns:fx="http://ns.adobe.com/mxml/2009"   
  3.     xmlns:s="library://ns.adobe.com/flex/spark"   
  4.     xmlns:mx="library://ns.adobe.com/flex/mx"  
  5.     horizontalAlign="left"  
  6.     width="176" height="22">  
  7.  <fx:Declarations>  
  8.   <!-- 将非可视元素（例如服务、值对象）放在此处 -->   
  9.  </fx:Declarations>  
  10.  <fx:Script>  
  11.   <![CDATA[ 
  12.    import mx.controls.DateField; 
  13.    import mx.core.FlexGlobals; 
  14.    import mx.core.INavigatorContent; 
  15.    import mx.formatters.DateFormatter; 
  16.    import mx.managers.PopUpManager; 
  17.     
  18.    [Bindable] 
  19.    /** 
  20.     * 控件是否可以直接输入日期 
  21.     */ 
  22.    public var editable:Boolean; 
  23.     
  24.    [Bindable] 
  25.    /** 
  26.     * 日期格式  YYYY MM DD HH NN SS 
  27.     */ 
  28.    public var formatString:String ="YYYY-MM-DD HH:NN:SS"; 
  29.     
  30.    [Bindable] 
  31.    private var _date:Date = new Date(); 
  32.     
  33.    private var _year:int=0,_month:int=0,_day:int=0,_hour:int=0,_minute:int=0,_second:int=0; 
  34.     
  35.    /** 
  36.     * 设置显示日期字符串 
  37.     */ 
  38.    public function set text(value:String):void 
  39.    { 
  40.     _date=DateFormatter.parseDateString(value);     
  41.    } 
  42.     
  43.    /** 
  44.     * 设置日期 
  45.     */ 
  46.    public function set date(value:Date):void 
  47.    { 
  48.     _year = value.fullYear; 
  49.     _month = value.month; 
  50.     _day =value.day; 
  51.     _minute=value.minutes; 
  52.     _hour=value.hours; 
  53.     _second=value.seconds;  
  54.     _date = value;  
  55.    } 
  56.     
  57.    /** 
  58.     * 获取控件时间 
  59.     */ 
  60.    public function get date():Date 
  61.    { 
  62.     return _date; 
  63.    } 
  64.     
  65.    /** 
  66.     * 获取Chooser日期 
  67.     */ 
  68.    public function  onGetDate(y:int,mo:int,d:int,h:int,mi:int,s:int):void 
  69.    { 
  70.     this._year=y; 
  71.     this._month = mo; 
  72.     this._day = d; 
  73.     this._hour = h; 
  74.     this._minute = mi; 
  75.     this._second = s; 
  76.     _date = new Date(_year,_month,_day,_hour,_minute,_second); 
  77.     _inSelected = false; 
  78.    }    
  79.     
  80.    private var _inSelected:Boolean = false; 
  81.     
  82.    /** 
  83.     * 选择年月日 
  84.     */ 
  85.    protected function chooseDate_LBtn_clickHandler(event:MouseEvent):void 
  86.    { 
  87.     // TODO Auto-generated method stub 
  88.     if(_inSelected == true) 
  89.      return ; 
  90.     var dateChooser:YJQChooseDate = new YJQChooseDate();      
  91.     dateChooser.setDate(date.fullYear,date.month,date.date,date.hours,date.minutes,date.seconds);     
  92.     dateChooser.onReturnTime = onGetDate; 
  93.     dateChooser.cancelHandler = function():void 
  94.     { 
  95.      _inSelected = false; 
  96.     } 
  97.     dateChooser.x = event.stageX; 
  98.     dateChooser.y = event.stageY; 
  99.     PopUpManager.addPopUp(dateChooser,FlexGlobals.topLevelApplication as DisplayObject); 
  100.     _inSelected = true; 
  101.    }   
  102.     
  103.    private  function DateToString(d:Date,format:String):String 
  104.    { 
  105.     //YYYY-MM-DD HH:NN:SS 
  106.     var str:String = format; 
  107.     str=str.replace("YYYY",d.fullYear); 
  108.     str = str.replace("MM",d.month+1); 
  109.     str=str.replace("DD",d.date); 
  110.     str=str.replace("HH",d.hours); 
  111.     str=str.replace("NN",d.minutes); 
  112.     str=str.replace("SS",d.seconds); 
  113.     return str; 
  114.    } 
  115.     
  116.    override public function toString():String 
  117.    { 
  118.     return DateToString(_date,formatString); 
  119.    } 
  120.   ]]>  
  121.  </fx:Script>  
  122.  <s:TextInput id="date_input"  text="{DateToString(_date,formatString)}"  height="100%" width="100%" />   
  123.  <mx:LinkButton label=">>" id="chooseDate_LBtn" click="chooseDate_LBtn_clickHandler(event)" />  
  124.    
  125.    
  126. </s:HGroup>  
YJQChooseDate.mxml

[html]  view plain copy
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <s:BorderContainer xmlns:fx="http://ns.adobe.com/mxml/2009"   
  3.     xmlns:s="library://ns.adobe.com/flex/spark"   
  4.     xmlns:mx="library://ns.adobe.com/flex/mx"      
  5.     minWidth="200" maxWidth="200"  
  6.     minHeight="260" maxHeight="260"        
  7.     width="200" height="260">  
  8.  <fx:Declarations>  
  9.   <!-- 将非可视元素（例如服务、值对象）放在此处 -->  
  10.  </fx:Declarations>  
  11.  <fx:Script>  
  12.   <![CDATA[ 
  13.    import mx.events.FlexEvent; 
  14.    import mx.managers.PopUpManager; 
  15.    /** 
  16.     * year month day  hour  minute second 
  17.     */ 
  18.    public var onReturnTime:Function; 
  19.     
  20.    [Bindable] 
  21.    private var _hour:int = 0; 
  22.     
  23.    [Bindable] 
  24.    private var _minute:int =0; 
  25.     
  26.    [Bindable] 
  27.    private var _second:int =0; 
  28.     
  29.    private var _year:int,_month:int,_day:int; 
  30.     
  31.    /** 
  32.     * 设置日期 
  33.     */ 
  34.    public function setDate(year:int,month:int,day:int ,hour:int,minute:int,second:int):void 
  35.    { 
  36.     _year=year; 
  37.     _month=month; 
  38.     _day=day; 
  39.     _hour = hour; 
  40.     _minute=minute; 
  41.     _second=second; 
  42.    } 
  43.    /** 
  44.     * 输入小时是否合理 
  45.     */ 
  46.    protected function hour_focusOutHandler(event:FocusEvent):void 
  47.    { 
  48.     if(isNaN(Number(hour.text))) 
  49.     { 
  50.      hour.text=_hour.toString(); 
  51.      return; 
  52.     } 
  53.     _hour = int(hour.text); 
  54.     if(_hour<0) 
  55.      _hour=0; 
  56.     else if(_hour>23) 
  57.      _hour=23; 
  58.     hour.text = _hour.toString();     
  59.    } 
  60.    /** 
  61.     * 输入分钟是否合理 
  62.     */ 
  63.    protected function minute_focusOutHandler(event:FocusEvent):void 
  64.    { 
  65.     if(isNaN(Number(minute.text))) 
  66.     { 
  67.      minute.text=_minute.toString(); 
  68.      return; 
  69.     } 
  70.     _minute = int(minute.text); 
  71.     if(_minute<0) 
  72.      _minute=0; 
  73.     else if(_minute>59) 
  74.      _minute=59; 
  75.     minute.text = _minute.toString();  
  76.    } 
  77.    /** 
  78.     * 输入秒是否合理 
  79.     */ 
  80.    protected function second_focusOutHandler(event:FocusEvent):void 
  81.    { 
  82.     if(isNaN(Number(second.text))) 
  83.     { 
  84.      second.text=_second.toString(); 
  85.      return; 
  86.     } 
  87.     _second = int(second.text); 
  88.     if(_second<0) 
  89.      _second=0; 
  90.     else if(_second>59) 
  91.      _second=59; 
  92.     second.text = _second.toString();  
  93.    } 
  94.    /** 
  95.     * 双击代表选择 
  96.     */ 
  97.    protected function vgroup1_doubleClickHandler(event:MouseEvent):void 
  98.    { 
  99.     ok_clickHandler(null); 
  100.    } 
  101.    /** 
  102.     * 返回日期 
  103.     */ 
  104.    protected function ok_clickHandler(event:MouseEvent):void 
  105.    { 
  106.     // TODO Auto-generated method stub 
  107.     var date:Date = dateChosser.selectedDate;     
  108.     onReturnTime(date.fullYear,date.month,date.day,_hour,_minute,_second); 
  109.     try 
  110.     { 
  111.      PopUpManager.removePopUp(this); 
  112.     } 
  113.     catch(error:Error) 
  114.     { 
  115.      this.parent.removeChild(this); 
  116.     } 
  117.    } 
  118.    public var cancelHandler:Function; 
  119.     
  120.    /** 
  121.     * 取消日期选择 
  122.     */ 
  123.    protected function cancel_clickHandler(event:MouseEvent):void 
  124.    { 
  125.     try 
  126.     { 
  127.      PopUpManager.removePopUp(this); 
  128.     } 
  129.     catch(error:Error) 
  130.     { 
  131.      this.parent.removeChild(this); 
  132.     } 
  133.     cancelHandler(); 
  134.    } 
  135.  
  136.    /** 
  137.     * DateChooser加载完成后执行 
  138.     */ 
  139.    protected function dateChosser_creationCompleteHandler(event:FlexEvent):void 
  140.    { 
  141.     // TODO Auto-generated method stub 
  142.     dateChosser.selectedDate .setFullYear(_year,_month,_day);     
  143.    } 
  144.   ]]>  
  145.  </fx:Script>  
  146.  <s:VGroup width="100%" height="100%" >  
  147.   <mx:DateChooser width="100%" id="dateChosser"   >  
  148.      
  149.   </mx:DateChooser>  
  150.   <s:HGroup paddingTop="0" paddingLeft="10" width="100%" horizontalAlign="left">  
  151.    <s:TextInput id="hour"  width="23" text="{this._hour.toString()}"  focusOut="hour_focusOutHandler(event)" />  
  152.    <s:Label paddingTop="4" text="时:"   />  
  153.      
  154.    <s:TextInput id="minute"  width="21" text="{this._minute.toString()}"  focusOut="minute_focusOutHandler(event)"/>  
  155.    <s:Label paddingTop="4" text="分:"    />  
  156.      
  157.    <s:TextInput id="second"  width="22" text="{this._second.toString()}"  focusOut="second_focusOutHandler(event)"/>  
  158.    <s:Label paddingTop="4" text="秒:" />  
  159.   </s:HGroup>  
  160.   <s:HGroup width="100%" horizontalCenter="true" >  
  161.    <s:Button label="确定" id="ok" click="ok_clickHandler(event)" />  
  162.    <mx:Spacer width="100%" />  
  163.    <s:Button label="取消" id="cancel" click="cancel_clickHandler(event)" />  
  164.   </s:HGroup>  
  165.  </s:VGroup>  
  166.    
  167.    
  168. </s:BorderContainer>  
测试文件
[html]  view plain copy
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"   
  3.       xmlns:s="library://ns.adobe.com/flex/spark"   
  4.       xmlns:mx="library://ns.adobe.com/flex/mx"   
  5.       creationComplete="application1_creationCompleteHandler(event)"  
  6.       xmlns:supportClasses="com.esri.ags.skins.supportClasses.*"   
  7.       minWidth="955" minHeight="600" xmlns:YJQDateField="YJQDateField.*">  
  8.  <s:layout>  
  9.   <supportClasses:AttachmentLayout/>  
  10.  </s:layout>  
  11.  <fx:Script>  
  12.   <![CDATA[ 
  13.    import mx.controls.Alert; 
  14.    import mx.events.FlexEvent; 
  15.    import mx.formatters.DateFormatter; 
  16.    protected function application1_creationCompleteHandler(event:FlexEvent):void 
  17.    { 
  18.     // TODO Auto-generated method stub 
  19.     var date:Date = DateFormatter.parseDateString("2011-08-06 14:21:25"); 
  20.    } 
  21.   ]]>  
  22.  </fx:Script>  
  23.  <fx:Declarations>  
  24.   <!-- 将非可视元素（例如服务、值对象）放在此处 -->  
  25.  </fx:Declarations>  
  26.  <YJQDateField:YJQDateField />  

  1. </s:Application>  
转载：http://blog.csdn.net/zz87250976/article/details/8981022

容妞
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Flex自定义DateField选择时分秒
09-06
自定义dateField 自定义dateChoose 默认中文显示 支持时分秒选择
extjs4.2 日期控件 datefield 拓展加上选择时分秒功能
03-06
在ExtJs4.2表单控件里分别有个时间控件（datafield）和时间控件(timefield)，但是官方提供的控件不能将日期和时分秒整合到一起，我从网上搜集整理了一个可用的选择日期时分秒的拓展控件，extjs版本是4.2，亲测能用，...
FLEX3和FLEX4组件变动表
meteorWJ's Home—Floating clound
01-06 2407
http://www.soave.cn/post/2009/11/02/flex3and4_differences.aspx http://www.adobe.com/cn/devnet/flex/articles/flex3and4_differences_04.html 【新增组件和容器】 Flex 4 beta 引入了许多使用新架构的新组件类，它们应当可以令外观和其他自定义操作更简单。下表列
Flex4.5 自定义的日历控件
09-05 1378
效果图： <mx:Form xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" width="100%" height="22" minWidth="50" max
Flex4学习笔记（一）－－基础控件的使用
diejiankuai3444的博客
08-15 85
1.一个最简单的例子，按钮点击事件 <fx:Script> <![CDATA[ import mx.controls.Alert; protected function btn_clickHandler(event:MouseEvent):void { var btn:Button = event.target as Bu...
Flex自定义DateField选择时分秒 修复版
10-24
自定义dateField 自定义dateChoose 默认中文显示 支持时分秒选择
Flex中DateField实现时分秒选择并添加确定按钮 DateChooser
06-07
最近刚好用到DateField组件,却无奈的发现只能选择年月日,不支持时分秒,在晚上找了好多,有的勉强可以用,但是很不完善.对从网上拿到一份代码进行了改善,具体从哪里拿的也忘了,请原作者勿怪. 改善之后的功能: 1.可以...
flex DateField 时分秒 选择
06-29
felx DateField 控件 完美支持时分秒选择，包含源代码，可以根据需要进行修改。版本为flex4.0。
flex日期控件可选时分秒
05-03
flex日期控件可选时分秒，好用。
自扩展Flex控件，可以同时选择日期和时间
03-14
自扩展Flex控件，可以同时选择日期和时间 自扩展Flex控件，可以同时选择日期和时间 自扩展Flex控件，可以同时选择日期和时间
Extjs5.1版本时间时分秒控件
05-18
Extjs时间控件可选年月日时分秒，哪个版本都可使用，谢谢使用
Flex 日期时间选择控件
10-26
Flex 日期时间选择控件，可选择小时、分钟、12/24小时格式
Flex日期选择器组件(带年月日时分妙)
05-14
因为flex提供的有日期组件，但是只有年月日，没有时分妙，又不是很好看。开发了一个Flex日期选择器组件(带年月日时分妙)，若哪里需要用到日期选择器组件，把DateField.swc文件拷贝到Flex项目的libs文件夹内，引用util.dateField包下的DateFieldComp组件即可。 用组件的id.text可获得组件的日期。
Flex中DateField实现时分秒选择并添加确定按钮
大志的工作学习笔记
06-08 285
最近刚好用到DateField组件,却无奈的发现只能选择年月日,不支持时分秒,在晚上找了好多,有的勉强可以用,但是很不完善.对从网上拿到一份代码进行了改善,具体从哪里拿的也忘了,请原作者勿怪. 改善之后的功能: 1.可以正常选择年月日时分秒. 2.可以根据DateField的formatString属性判断DateChooser中是否要展示时分秒等. 3.DateField跟DateC...
flex时间控件
11-17
flex时间控件，可直接导入使用，带年月日、时分秒的选择功能
axure 日期选择框
最新发布
09-13
4. 在弹出的交互设置窗口中，选择"Set Text"（设置文本）作为交互动作。 5. 在输入框中，输入要将日期选择器的值设置到的文本框的名称或ID。例如，如果文本框的名称是"dateField"，则在输入框中输入"dateField"。 6....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值