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');