jquery easyui datebox 的使用
看了jquery easyui databox的官方api,還可以加入倒是很簡單,但是想要獲得他的值和修改值就很費勁,不知道怎麼弄,試了n次終於搞定。這裡總結一下,供有相同問題的人查詢。
1、 官方api介紹
DateBox
Extend from $.fn.combo.defaults. Override defaults with $.fn.datebox.defaults
Dependencies
- combo
- calendar
Usage
- <inputid="dd"type="text"></input>
- $('#dd').datebox({
- required:true
- });
Properties
The properties extend from combo, below is the added properties for datebox.
Name | Type | Description | Default |
---|---|---|---|
panelWidth | number | The drop down calendar panel width. | 180 |
panelHeight | number | The drop down calendar panel height. | auto |
currentText | string | The text to display for the current day button. | Today |
closeText | string | The text to display for the close button. | Close |
okText | string | The text to display for the ok button. | Ok |
disabled | boolean | When true to disable the field. | false |
formatter | function | A function to format the date, the function take a 'date' parameter and return a string value. | |
parser | function | A function to parse a date string, the function take a 'date' string and return a date value. |
Events
Name | Parameters | Description |
---|---|---|
onSelect | date | Fires when user select a date. |
Methods
The methods extend from combo, below is the overridden methods for datebox.
Name | Parameter | Description |
---|---|---|
options | none | Return the options object. |
calendar | none | Get the calendar object. |
setValue | value | Set the datebox value. |
2、 基本用法:
1) 加入日期選擇框
$("#dd").datebox({"required":true});
在id為dd的input type=text的輸入框加入iquery easyui的日期選擇框,且該日期必須輸入時,使用(required: true),否則使用required:false;
2) javascript獲取日期選擇框的值
使用常用的jquery獲取input type=text的值的方式
$("#dd").val()
發現沒有反應,取不到值。問了度娘只有才發現原來是使用下面的方式取值:
$("#dd").datebox("getValue");
當然這種方式不是太符合我們習慣,那麼我們可以給它新增一個事件監聽,在datebox onSelect 日期選中後,自動為input id="dd" type="text"賦值,然後我們就可以使用
$("#dd").val()獲取選中的日期值了。
具體程式碼如下:
<script type="text/javascript">
$(document).ready(function(){
$("#dd").datebox({
required:true,
onSelect: function(date){
$("#dd").val(date);
}
});
});
</script>
3) javascript設定datebox的值
$("#dd").datebox("setValue", "2012-01-01");
補充:
需求場景:當我們需要把datebox中的設定的值,取得後返回一個Date型別的時候,就發現有些不好辦了?
錯誤用法:
var tempStr = $("#dd").datebox("getValue");
var tempDate = new Date(tempStr);
return tempDate;
發現在FireFox下,這樣做是沒有問題的;但是IE下就不起作用了,datebox("getValue")能返回正確的隻字符串,例如“2012-01-01",但是new Date(str)的時候返回為NaN;
查了下Date的API發現,new Date(str) 呼叫了 Date.parse(str) 函式, 但是在IE下該函式預設支援Str格式為:
MM-dd-yyyy HH:mm:ss所以我們給定的字串不是這種格式的,那麼就解析不了。
找到原因之後,就好解決了,下面提供一個自己是是實現的函式 parseDate(dateStr)
/**
* 解析輸入的dateStr,返回Date型別。
* dateStr: XXXX-XX-XX
*/
function parseDate(dateStr){
var strArray = dateStr.split("-");
if(strArray.length == 3){
return new Date(strArray[0], strArray[1], strArray[2]);
}else{
return new Date();
}
}
ok,終於知道怎麼用了。
參考資料: