jQuery EasyUI - DateTimeBox 日期时间框

￡神魔★判官ぃ 2022-07-15 14:15 190阅读 0赞

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

![jeasyui_datetimebox.png][]

**依赖**

*  datebox
 *  timespinner

**用法**

Js代码   ![收藏代码][icon_star.png]

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

** 　取值：**

Js代码   ![收藏代码][icon_star.png]

1.  $('\#dt).datetimebox('getValue')

**特性**

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

<table style="color:rgb(57,57,57)"> 
 <tbody> 
  <tr> 
   <td> <p><strong>名称</strong></p> </td> 
   <td> <p><strong>类型</strong></p> </td> 
   <td> <p><strong>说明</strong></p> </td> 
   <td> <p><strong>默认值</strong></p> </td> 
  </tr> 
  <tr> 
   <td> <p>showSeconds</p> </td> 
   <td> <p>boolean</p> </td> 
   <td> <p>定义是否显示秒的信息。</p> </td> 
   <td> <p>true</p> </td> 
  </tr> 
 </tbody> 
</table>

**方法**

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

<table style="color:rgb(57,57,57)"> 
 <tbody> 
  <tr> 
   <td> <p><strong>名称</strong></p> </td> 
   <td> <p><strong>参数</strong></p> </td> 
   <td> <p><strong>说明</strong></p> </td> 
  </tr> 
  <tr> 
   <td> <p>options</p> </td> 
   <td> <p>none</p> </td> 
   <td> <p>返回&nbsp;options&nbsp;对象。</p> </td> 
  </tr> 
  <tr> 
   <td> <p>spinner</p> </td> 
   <td> <p>none</p> </td> 
   <td> <p>返回&nbsp;timespinner&nbsp;对象。</p> </td> 
  </tr> 
  <tr> 
   <td> <p>setValue</p> </td> 
   <td> <p>value</p> </td> 
   <td> <p>设置&nbsp;datetimebox&nbsp;的值。</p> </td> 
  </tr> 
 </tbody> 
</table>

问: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代码   ![收藏代码][icon_star.png]

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

[jeasyui_datetimebox.png]: /images/20220715/499260f07f7c4b039eae9389192a8a56.png
[icon_star.png]: /images/20220715/561e480d54cb451187936cb71d2e7b76.png

发表评论取消回复

表情：

评论列表（有 0 条评论，190人围观）

还没有评论，来说两句吧...

相关阅读

相关日期时间jQuery代码

<script type="text/javascript"> var start = { elem: 's

╰半橙微兮°/ 2022年09月27日 04:51/ 0 赞/ 97 阅读

相关 jquery easyui 验证框的使用

使用过程中的一积累，备查。 EasyUI 验证框使用方法: // 0、调用数据验证方法 return $("\form1").form('validate');

心已赠人/ 2022年08月26日 03:44/ 0 赞/ 111 阅读

相关 easyui-datetimebox默认显示当前时间

1.html标签开始日期:<input type="text" class="easyui-datetimebox" style="width:150px" id=

墨蓝/ 2022年08月19日 11:12/ 0 赞/ 304 阅读

相关 jQuery EasyUI - DateTimeBox 日期时间框

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

￡神魔★判官ぃ/ 2022年07月15日 14:15/ 0 赞/ 191 阅读

相关 EasyUI修改datetimebox 时间选择框加'清空'按钮修改'今天 '事件

我们在使用EasyUI时会发现，datetimebox 并非能很好的满足某些需求 1.开始时间与结束时间有联动(即开始时间选择之后，结束时间选择框不能选择开始时间选择框所选

港控/mmm°/ 2022年06月16日 06:19/ 0 赞/ 630 阅读

相关 EasyUI修改DateBox和DateTimeBox的默认日期格式

最近整理Easyui控件的时候，对Easyui的DateBox控件和DateTimeBox控件进行了梳理，而我之所以将EasyUI的DateBox控件和Date

女爷i/ 2022年06月10日 09:46/ 0 赞/ 129 阅读

相关日期时间选择框

日期时间选择框: 1) jsp 部分: <div class="form-group"> <label for="dtp_input1"

川长思鸟来/ 2022年05月13日 13:00/ 0 赞/ 216 阅读

相关 easyUI datetimebox 自定义显示格式

项目里需要显示自定义显示格式，比如只显示yyy,yyyy-mm,yyyy-mm-dd等格式。直接设置formatter参数的话，总是报错。用firefox调试后发现，好像在设置

傷城~/ 2022年03月26日 08:52/ 0 赞/ 274 阅读

相关 easyui-datetimebox单个限制时间方法总结

思路： 1.先定义一个时间标签框； ![20190817115208102.png][] 2.在对话框显示前触发我们时间限制的方法； ![watermark_type

逃离我推掉我的手/ 2021年10月14日 01:24/ 0 赞/ 414 阅读

相关 EasyUI日期时间框DateTimeBox

WEB DEMO 日期时间框 DateTimeBox <!DOCTYPE html> <html> <HTML> <head> <H

浅浅的花香味﹌/ 2021年09月29日 14:52/ 0 赞/ 182 阅读