jQuery EasyUI - DateTimeBox 日期时间框

时间:2023-01-19 02:34:27

扩展自 $.fn.datebox.defaults。用 $.fn.datetimebox.defaults 重写了 defaults。

 

jQuery EasyUI - DateTimeBox 日期时间框

 

依赖

  • datebox
  • timespinner

用法

Js代码  jQuery EasyUI - DateTimeBox 日期时间框
  1. <input id="dt" type="text"></input>  
  2.   
  3. $('#dt').datetimebox({    
  4.      showSeconds:false  
  5. });   

  取值:

 

Js代码  jQuery EasyUI - DateTimeBox 日期时间框
  1. $('#dt).datetimebox('getValue')  

  

特性

其特性扩展自 datebox,下列是为 datetimebox 增加的特性。

名称

类型

说明

默认值

showSeconds

boolean

定义是否显示秒的信息。

true

方法

其方法扩展自 datebox,下列是为 datetimebox 重写的方法。

名称

参数

说明

options

none

返回 options 对象。

spinner

none

返回 timespinner 对象。

setValue

value

设置 datetimebox 的值。

 

 

问:easyui DateTimeBox 下面ok按钮

有点击事件吗

 

ok按钮没有点击事件,但是可以通过onSelect事件模拟出“点击了ok按钮一样的效果”.
关键:
0,理解DateTimeBox控件,这个控件是由DateBox+TimeSpinner这2个控件组成的,而DateBox又继承自combo控件。
1,使用setText方法,设置控件文本框的内容,这个方法是DateTimeBox从combo控件中继承过来的。不能使用setValue方法,因为这个方法是从DateBox继承过来的,但是DateTimeBox控件并没有重写这个方法,由于DateTimeBox还包含"时分秒",所以无法使用这个DateBox的方法。
2,使用spinner方法,获取“时分秒”信息,这个方法返回DateTimeBox中包含的TimeSpinner控件,使用TimeSpinner控件的getValue方法可以获得时间信息
3,使用onSelect方法,获取“日期”信息,onSelect:function(date){},其中date是事件触发时选中的日期,是js的Date类型数据
4,使用hidePanel方法,把下拉日期面板关闭,该方法也是继承自combo控件
代码并格式化:让日期2014-8-6变成2014-08-06格式的代码:

Js代码  jQuery EasyUI - DateTimeBox 日期时间框
  1. $('#TextStartTime').datetimebox({  
  2.    showSeconds:false,  
  3.    required:true,  
  4.    onSelect:function(date){  
  5.         var y = date.getFullYear();  
  6.         var m = date.getMonth() + 1;  
  7.         var d = date.getDate();  
  8.         var time=$('#TextStartTime').datetimebox('spinner').spinner('getValue');  
  9.         var dateTime = y + "-" + (m < 10 ? ("0" + m) : m) + "-" + (d < 10 ? ("0" + d) : d) +' '+time;  
  10.         $('#TextStartTime').datetimebox('setText', dateTime);  
  11.         $('#TextStartTime').datetimebox('hidePanel');  
  12.         // $('#TextStartTime').val(dateTime);  
  13.    }  
  14. });