EasyUI-datebox

基础

扩展自 $.fn.combo.defaults。用 $.fn.datebox.defaults 重写了 defaults。

依赖

• combo
• calendar

用法

方式1:
<input id="dd" class="easyui-datebox" required="true"></input>
方式2:
<input id="dd" type="text"></input>
$('#dd').datebox(options);//options代表datebox的属性集合

属性

其属性扩展自combo，下列是为databox增加的属性

名称	类型	说明	默认值
panelWidth	number	下拉日历面板的宽度	180
panelHeight	number	下拉日历面板的高度	auto
currentText	string	当前日期按钮上显示的文字	Today
closeText	string	关闭按钮上显示的文字	Close
okText	string	确定按钮上显示的文字	OK
disabled	boolean	为true时禁用该域	false
formatter	function	格式化日期的函数，此函数有一个'date'参数，并返回一个字符串值
parser	function	解析日期字符串的函数，此函数有一个'date'字符串参数，并返回一个日期值

 

 

 

 

 

 

 

 

 

事件

名称	参数	说明
onSelect	date	当用户选择一个日期时触发

 

 

方法

其方法扩展自combo,下列是为datebox重定的方法

名称	参数	说明
options	none	返回options对象
calender	none	获取calender对象
setValue	value	设置databox值

 

 

 

 

实例

1.定义一个不可编辑，以"YYYY-MM-DD"格式输出的日期控件

方式1：
<input id="dd" class="easyui-datebox" required="true"></input>
<script>
$(function(){
    $('#dd').datebox({
        formatter: function(date){ return date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate(); },
        parser: function(date){ return new Date(Date.parse(date.replace(/-/g,"/"))); }
        });    
    })
</script>
方式2：
<input id="dd" class="easyui-datebox" required="true" editable="false" formatter="timeFormatter" parser="timeParser"></input>
<script>
    function timeFormatter(date){
        return date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate();
    }
    function timeParser(date){
        return new Date(Date.parse(date.replace(/-/g,"/")));
    }
</script>

2.获取值

$("#dd").datebox('getValue');