jQuery EasyUI - DateTimeBox 日期时间框

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

 

 

依赖

• datebox
• timespinner

用法

Js代码  

1. <input id="dt" type="text"></input>  
2.   
3. $('#dt').datetimebox({    
4.      showSeconds:false  
5. });   

 　取值：

 

Js代码  

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代码  

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. });