EasyUI中Datebox日期框的简单使用

- 日理万妓 2023-10-18 20:19 16阅读 0赞

## 场景 ##

### 效果 ###

![Image 1][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70][]

### 属性 ###

该属性扩展自组合（combo），下面是为日期框（datebox）添加的属性。

<table> 
 <tbody> 
  <tr> 
   <th>名称</th> 
   <th>类型</th> 
   <th>描述</th> 
   <th>默认值</th> 
  </tr> 
  <tr> 
   <td>panelWidth</td> 
   <td>number</td> 
   <td>下拉日历面板的宽度。</td> 
   <td>180</td> 
  </tr> 
  <tr> 
   <td>panelHeight</td> 
   <td>number</td> 
   <td>下拉日历面板的高度。</td> 
   <td>auto</td> 
  </tr> 
  <tr> 
   <td>currentText</td> 
   <td>string</td> 
   <td>当前日期按钮上显示的文本。</td> 
   <td>Today</td> 
  </tr> 
  <tr> 
   <td>closeText</td> 
   <td>string</td> 
   <td>关闭按钮上显示的文本。</td> 
   <td>Close</td> 
  </tr> 
  <tr> 
   <td>okText</td> 
   <td>string</td> 
   <td>确定按钮上显示的文本。</td> 
   <td>Ok</td> 
  </tr> 
  <tr> 
   <td>disabled</td> 
   <td>boolean</td> 
   <td>设置为 true 时禁用该域。</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>buttons</td> 
   <td>array</td> 
   <td>日历下面的按钮。该属性自版本 1.3.5 起可用。<br> 代码实例： <pre>&nbsp;</pre> 
    <ol> 
     <li>var buttons = $.extend([], $.fn.datebox.defaults.buttons);</li> 
     <li>buttons.splice(1, 0, { </li> 
     <li>text: 'MyBtn',</li> 
     <li>handler: function(target){ </li> 
     <li>alert('click MyBtn');</li> 
     <li>}</li> 
     <li>});</li> 
     <li>$('#dd').datebox({ </li> 
     <li>buttons: buttons</li> 
     <li>});</li> 
    </ol></td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>sharedCalendar</td> 
   <td>string,selector</td> 
   <td>多个日期框（datebox）组件使用的共享日历。该属性自版本 1.3.5 起可用。<br> 代码实例： <pre>&nbsp;</pre> 
    <ol> 
     <li>&lt;input class="easyui-datebox" sharedCalendar="#sc"&gt;</li> 
     <li>&lt;input class="easyui-datebox" sharedCalendar="#sc"&gt;</li> 
     <li>&lt;div id="sc" class="easyui-calendar"&gt;&lt;/div&gt;</li> 
    </ol></td> 
   <td>null</td> 
  </tr> 
  <tr> 
   <td>formatter</td> 
   <td>function</td> 
   <td>格式化日期的函数，该函数有一个 'date' 参数，并返回一个字符串值。下面的实例演示如何重写默认的格式化（formatter）函数。 <pre>&nbsp;</pre> 
    <ol> 
     <li>$.fn.datebox.defaults.formatter = function(date){ </li> 
     <li>var y = date.getFullYear();</li> 
     <li>var m = date.getMonth()+1;</li> 
     <li>var d = date.getDate();</li> 
     <li>return m+'/'+d+'/'+y;</li> 
     <li>}</li> 
    </ol></td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>parser</td> 
   <td>function</td> 
   <td>解析日期字符串的函数，该函数有一个 'date' 字符串，并返回一个日期值。下面的实例演示如何重写默认的解析（parser）函数。 <pre>&nbsp;</pre> 
    <ol> 
     <li>$.fn.datebox.defaults.parser = function(s){ </li> 
     <li>var t = Date.parse(s);</li> 
     <li>if (!isNaN(t)){ </li> 
     <li>return new Date(t);</li> 
     <li>} else { </li> 
     <li>return new Date();</li> 
     <li>}</li> 
     <li>}</li> 
    </ol></td> 
   <td>&nbsp;</td> 
  </tr> 
 </tbody> 
</table>

### 事件 ###

<table> 
 <tbody> 
  <tr> 
   <th>名称</th> 
   <th>参数</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td>onSelect</td> 
   <td>date</td> 
   <td>当用户选择一个日期时触发。<br> 代码实例： <pre>&nbsp;</pre> 
    <ol> 
     <li>$('#dd').datebox({ </li> 
     <li>onSelect: function(date){ </li> 
     <li>alert(date.getFullYear()+":"+(date.getMonth()+1)+":"+date.getDate());</li> 
     <li>}</li> 
     <li>});</li> 
    </ol></td> 
  </tr> 
 </tbody> 
</table>

### 方法 ###

该方法扩展自组合（combo），下面是为日期框（datebox）重写的方法。

<table> 
 <tbody> 
  <tr> 
   <th>名称</th> 
   <th>参数</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td>options</td> 
   <td>none</td> 
   <td>返回选项（options）对象。</td> 
  </tr> 
  <tr> 
   <td>calendar</td> 
   <td>none</td> 
   <td>获取日历（calendar）对象。下面的实例演示如何获取日历（calendar）对象，然后重现它。 <pre>&nbsp;</pre> 
    <ol> 
     <li>// get the calendar object</li> 
     <li>var c = $('#dd').datebox('calendar');</li> 
     <li>// set the first day of week to monday</li> 
     <li>c.calendar({ </li> 
     <li>firstDay: 1</li> 
     <li>});</li> 
    </ol></td> 
  </tr> 
  <tr> 
   <td>setValue</td> 
   <td>value</td> 
   <td>设置日期框（datebox）的值。<br> 代码实例： <pre>&nbsp;</pre> 
    <ol> 
     <li>$('#dd').datebox('setValue', '6/1/2012'); // set datebox value</li> 
     <li>var v = $('#dd').datebox('getValue'); // get datebox value</li> 
    </ol></td> 
  </tr> 
 </tbody> 
</table>

## 实现 ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css">
        <link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css">
        <script type="text/javascript" src="/easyui/jquery.min.js"></script>
        <script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script>
    </head>
    <body>
    <input id="dd" type="text" class="easyui-datebox" required="required">
    <input id="dd1" type="text" class="easyui-datebox" required="required">
    <script type="text/javascript">
        $('#dd1').datebox({
            onSelect: function(date){
                alert(date.getFullYear()+":"+(date.getMonth()+1)+":"+date.getDate());
            }
        });
    </script>
    </body>
    </html>

[Image 1]: 
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190621202218803.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70