datebox(日期输入框) · easyUI

### DateBox（日期输入框）扩展自$.fn.combo.defaults。使用$.fn.datebox.defaults重写默认值对象。日期输入框结合了一个可编辑的文本框控件和允许用户选择日期的下拉日历面板控件。选择的日期会自动转变为一个有效的日期然后填充到文本框中。选定的日期也可以被格式化为预定格式。 ![](https://box.kancloud.cn/2016-07-19_578d91393e37f.png) #### 依赖关系 - [combo](#) - [calendar](#) #### #### 使用案例使用标签创建日期输入框。 1. **<input** id="dd" type="text" class="easyui-datebox" required="required"**></input>** <input id="dd" type="text" class="easyui-datebox" required="required"></input> 使用Javascript创建日期输入框。 1. **<input** id="dd" type="text"**></input>** <input id="dd" type="text"></input> 1. $('#dd').datebox({ 1. required:true 1. }); $('#dd').datebox({ required:true }); #### #### 属性日期输入框扩展自[combo](#)(自定义下拉框)，日期输入框新增的属性如下： <table class="doc-table" align="left"><tbody><tr><th><strong>属性名</strong></th> <th><strong>属性值类型</strong></th> <th><strong>描述</strong></th> <th><strong>默认值</strong></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>显示OK按钮。</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>在日历下面的按钮。<strong><font color="#ff0000">（该属性自1.3.5版开始可用）</font></strong> <p>代码示例：</p><pre>var buttons = $.extend([], $.fn.datebox.defaults.buttons); buttons.splice(1, 0, { text: 'MyBtn', handler: function(target){ alert('click MyBtn'); } }); $('#dd').datebox({ buttons: buttons });</pre></td> <td/></tr><tr><td>sharedCalendar</td> <td>string,selector</td> <td>将一个日历控件共享给多个datebox控件使用。<strong><font color="#ff0000">（该属性自1.3.5版开始可用）</font></strong> <p>代码示例：</p><pre><input class="easyui-datebox" sharedCalendar="#sc"> <input class="easyui-datebox" sharedCalendar="#sc"> <div id="sc" class="easyui-calendar"></div></pre></td> <td>null</td></tr><tr><td>formatter</td> <td>function</td> <td>该函数用于格式化日期，它有一个'date'参数并且会返回一个字符串类型的值。下面的一个例子展示了如何重写默认的formatter函数。<br/><pre>$.fn.datebox.defaults.formatter = function(date){ var y = date.getFullYear(); var m = date.getMonth()+1; var d = date.getDate(); return m+'/'+d+'/'+y; } </pre></td> <td/></tr><tr><td>parser</td> <td>function</td> <td>该函数用于解析一个日期字符串，它有一个'date'字符串参数并且会返回一个日期类型的值。下面的一个例子展示了如何重写默认的parser函数。 <pre>$.fn.datebox.defaults.parser = function(s){ var t = Date.parse(s); if (!isNaN(t)){ return new Date(t); } else { return new Date(); } } </pre></td> <td/></tr></tbody></table> #### #### #### #### #### #### #### #### #### #### #### #### #### #### #### #### #### #### #### #### #### #### #### #### #### #### #### #### #### #### #### #### #### #### #### #### #### #### #### 事件 <table class="doc-table" align="left"><tbody><tr><th><strong>事件名</strong></th> <th><strong>事件参数</strong></th> <th><strong>描述</strong></th></tr><tr><td>onSelect</td> <td>date</td> <td>在用户选择了一个日期的时候触发。 <p>代码示例：</p><pre>$('#dd').datebox({ onSelect: function(date){ alert(date.getFullYear()+":"+(date.getMonth()+1)+":"+date.getDate()); } }); </pre></td></tr></tbody></table> #### #### #### #### #### #### #### #### #### #### 方法方法扩展自[combo](#)(自定义下拉框)，日期输入框重写的方法如下： <table class="doc-table" align="left"><tbody><tr><th><strong>方法名</strong></th> <th><strong>方法参数</strong></th> <th><strong>描述</strong></th></tr><tr><td>options</td> <td>none</td> <td>返回属性对象。</td></tr><tr><td>calendar</td> <td>none</td> <td>获取日历对象。下面的例子显示了如果获取日历对象并重新创建它。<pre>// 获取日历对象 var c = $('#dd').datebox('calendar'); // 设置一周的第一天是星期几（0是周日，1是周一） c.calendar({ firstDay: 1 }); </pre></td></tr><tr><td>setValue</td> <td>value</td> <td>设置日期输入框的值。 <p>代码示例：</p><pre>$('#dd').datebox('setValue', '6/1/2012'); // 设置日期输入框的值 var v = $('#dd').datebox('getValue'); // 获取日期输入框的值</pre></td></tr></tbody></table>