jQuery EasyUI 表單插件 – Datebox 日期框

2018-09-15 03:14 更新

jQuery EasyUI 表單插件 - Datebox 日期框

jQuery EasyUI 插件 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 時(shí)禁用該域。 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 多個(gè)日期框（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ù)有一個(gè) 'date' 參數(shù)，并返回一個(gè)字符串值。下面的實(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ù)有一個(gè) 'date' 字符串，并返回一個(gè)日期值。下面的實(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)用戶選擇一個(gè)日期時(shí)觸發(fā)。
代碼實(shí)例： 
$('#dd').datebox({
	onSelect: function(date){
		alert(date.getFullYear()+":"+(date.getMonth()+1)+":"+date.getDate());
	}
});

方法

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

名稱 參數(shù) 描述
options none 返回選項(xiàng)（options）對(duì)象。
calendar none 獲取日歷（calendar）對(duì)象。下面的實(shí)例演示如何獲取日歷（calendar）對(duì)象，然后重現(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 插件 jQuery EasyUI 插件
以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)