easyUI DateBox

@author YHC

继承至$.fn.combo.defaults.,覆盖默认值$.fn.datebox.defaults

datebox 关联了一个可编辑的文本框和一个下拉calendar panel(日期面板)并且允许用户选择一个日期,输入一个字符串到文本框中能够转换为一个有效值选择日期也可以被格式化为你想要的格式.

easyUI DateBox_第1张图片

相关依赖

  • combo
  • calendar

使用示例

从标记创建 datebox 
<input id="dd" type="text" class="easyui-datebox" required="required"></input>  
使用javascript创建 datebox 
<input id="dd" type="text"></input>  
$('#dd').datebox({  
    required:true  
});  

属性

属性继承至combo, 以下是datebox新增的属性.

Name Type Description Default
panelWidth number 下拉日期面板宽度. 180
panelHeight number 下拉日期面板高度. auto
currentText string 显示在当前日期按钮上的文本. Today
closeText string 显示在close按钮上的文本 . Close
okText string 显示在ok按钮上的文本. Ok
disabled boolean 当设置为true时禁用该组件. false
formatter function 转换日期的函数,这个函数提供一个'data'参数和返回一个string类型值.以下示例展示如何重写默认的formatter 函数.
$.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 一个转换日期字符串的函数,这个函数提供一个'date'字符串,和返回一个date值.以下示例展示如何重写默认的 parser 函数.
$.fn.datebox.defaults.parser = function(s){
	var t = Date.parse(s);
	if (!isNaN(t)){
		return new Date(t);
	} else {
		return new Date();
	}
}
 

事件

Name Parameters Description
onSelect date 当用户选择一个日期的时候触发.

示例代码:

$('#dd').datebox({
	onSelect: function(date){
		alert(date.getFullYear()+":"+(date.getMonth()+1)+":"+date.getDate());
	}
});

方法

方法继承至combo,以下是datebox重写的方法.

Name Parameter Description
options none 返回options 对象.
calendar none 得到日期对象.下面示例展示如何得到calendar对象然后重新创建.
// 得到calendar 对象
var c = $('#dd').datebox('calendar');
//设置一周的第一天为星期一
c.calendar({
	firstDay: 1
});
setValue value 设置datebox值.

示例代码:

$('#dd').datebox('setValue', '6/1/2012');	// 设置datebox 值
var v = $('#dd').datebox('getValue');	// 得到 datebox值
    以上如有错误信息,请指出!thanks!




你可能感兴趣的:(JavaScript,Date,function,String,calendar,Class)