easyUI DateBox可以返回string和date两种值

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

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

相关依赖

  • combo
  • calendar

使用示例

从标记创建 datebox 
[html]  view plain copy
 
  1. <input id="dd" type="text" class="easyui-datebox" required="required"></input>    
使用javascript创建 datebox 
[html]  view plain copy
 
  1. <input id="dd" type="text"></input>    
[javascript]  view plain copy
 
  1. $('#dd').datebox({    
  2.     required:true    
  3. });    

属性

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

NameTypeDescriptionDefault
panelWidthnumber下拉日期面板宽度.180
panelHeightnumber下拉日期面板高度.auto
currentTextstring显示在当前日期按钮上的文本.Today
closeTextstring显示在close按钮上的文本 .Close
okTextstring显示在ok按钮上的文本.Ok
disabledboolean当设置为true时禁用该组件.false
formatterfunction转换日期的函数,这个函数提供一个'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;
}
 
parserfunction一个转换日期字符串的函数,这个函数提供一个'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();
	}
}
 

事件

NameParametersDescription
onSelectdate当用户选择一个日期的时候触发.

示例代码:

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

方法

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

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

示例代码:

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

转自 http://www.goomoon.com/it/web/js/6532.html