jQuery EasyUI 表單插件 - Datebox 日期框

jQuery EasyUI 插件

擴(kuò)展自 $.fn.combo.defaults。通過 $.fn.datebox.defaults 重寫默認(rèn)的 defaults。

日期框（datebox）把可編輯的文本框和下拉日歷面板結(jié)合起來，用戶可以從下拉日歷面板中選擇日期。在文本框中輸入的字符串可悲轉(zhuǎn)換為有效日期。被選擇的日期也可以被轉(zhuǎn)換為期望的格式。

依賴

combo
calendar

用法

從標(biāo)記創(chuàng)建日期框（datebox）。

<input id="dd" type="text" class="easyui-datebox" required="required">

使用 javascript 創(chuàng)建日期框（datebox）。

<input id="dd" type="text">

$('#dd').datebox({
    required:true
});

屬性

該屬性擴(kuò)展自組合（combo），下面是為日期框（datebox）添加的屬性。

名稱	類型	描述	默認(rèn)值
panelWidth	number	下拉日歷面板的寬度。	180
panelHeight	number	下拉日歷面板的高度。	auto
currentText	string	當(dāng)前日期按鈕上顯示的文本。	Today
closeText	string	關(guān)閉按鈕上顯示的文本。	Close
okText	string	確定按鈕上顯示的文本。	Ok
disabled	boolean	設(shè)置為 true 時禁用該域。	false
buttons	array	日歷下面的按鈕。該屬性自版本 1.3.5 起可用。代碼實(shí)例： var buttons = $.extend([], $.fn.datebox.defaults.buttons); buttons.splice(1, 0, { ????text: 'MyBtn', ????handler: function(target){ ????????alert('click MyBtn'); ????} }); $('#dd').datebox({ ????buttons: buttons });
sharedCalendar	string,selector	多個日期框（datebox）組件使用的共享日歷。該屬性自版本 1.3.5 起可用。代碼實(shí)例： <input class="easyui-datebox" sharedCalendar="#sc"> <input class="easyui-datebox" sharedCalendar="#sc"> <div id="sc" class="easyui-calendar"></div>	null
formatter	function	格式化日期的函數(shù)，該函數(shù)有一個 'date' 參數(shù)，并返回一個字符串值。下面的實(shí)例演示如何重寫默認(rèn)的格式化（formatter）函數(shù)。 $.fn.datebox.defaults.formatter = function(date){ ????var y = date.getFullYear(); ????var m = date.getMonth()+1; ????var d = date.getDate(); ????return m+'/'+d+'/'+y; }
parser	function	解析日期字符串的函數(shù)，該函數(shù)有一個 'date' 字符串，并返回一個日期值。下面的實(shí)例演示如何重寫默認(rèn)的解析（parser）函數(shù)。 $.fn.datebox.defaults.parser = function(s){ ????var t = Date.parse(s); ????if (!isNaN(t)){ ????????return new Date(t); ????} else { ????????return new Date(); ????} }

事件

名稱	參數(shù)	描述
onSelect	date	當(dāng)用戶選擇一個日期時觸發(fā)。代碼實(shí)例： $('#dd').datebox({ ????onSelect: function(date){ ????????alert(date.getFullYear()+":"+(date.getMonth()+1)+":"+date.getDate()); ????} });

方法

該方法擴(kuò)展自組合（combo），下面是為日期框（datebox）重寫的方法。

名稱	參數(shù)	描述
options	none	返回選項(xiàng)（options）對象。
calendar	none	獲取日歷（calendar）對象。下面的實(shí)例演示如何獲取日歷（calendar）對象，然后重現(xiàn)它。 // get the calendar object var c = $('#dd').datebox('calendar'); // set the first day of week to monday c.calendar({ ????firstDay: 1 });
setValue	value	設(shè)置日期框（datebox）的值。代碼實(shí)例： $('#dd').datebox('setValue', '6/1/2012');????// set datebox value var v = $('#dd').datebox('getValue');????// get datebox value

jQuery EasyUI 插件其他擴(kuò)展

上一篇：jQuery EasyUI 表單插件 - Numberbox 數(shù)字框下一篇：jQuery EasyUI 表單插件 - Datetimebox 日期時間框