看了jquery easyui databox的官方api,還可以加入倒是很簡單,但是想要獲得他的值和修改值就很費勁,不知道怎么弄,試了n次終于搞定。這里總結(jié)一下,供有相同問題的人查詢。
1、 官方api介紹
DateBox
Extend from $.fn.combo.defaults. Override defaults with $.fn.datebox.defaults
Dependencies
combo calendar
Usage
<</span>input id="dd" type="text"></</span>input>
$('#dd').datebox({ required:true });
Properties
The properties extend from combo, below is the added properties for datebox.
NameTypeDescriptionDefault
panelWidthnumberThe drop down calendar panel width.180
panelHeightnumberThe drop down calendar panel height.auto
currentTextstringThe text to display for the current day button.Today
closeTextstringThe text to display for the close button.Close
okTextstringThe text to display for the ok button.Ok
disabledbooleanWhen true to disable the field.false
formatterfunctionA function to format the date, the function take a 'date' parameter and return a string value.
parserfunctionA function to parse a date string, the function take a 'date' string and return a date value.
Events
NameParametersDescription
onSelectdateFires when user select a date.
Methods
The methods extend from combo, below is the overridden methods for datebox.
NameParameterDescription
optionsnoneReturn the options object.
calendarnoneGet the calendar object.
setValuevalueSet the datebox value.
2、 基本用法:
1) 加入日期選擇框
[javascript]
view plaincopyprint?$("#dd").datebox({"required":true});
[javascript]
view plaincopyprint?$("#dd").datebox({"required":true});
在id為dd的input type=text的輸入框加入iquery easyui的日期選擇框,且該日期必須輸入時,使用(required: true),否則使用required:false;
2) javascript獲取日期選擇框的值
使用常用的jquery獲取input type=text的值的方式
[javascript]
view plaincopyprint?$("#dd").val()
[javascript]
view plaincopyprint?$("#dd").val()
發(fā)現(xiàn)沒有反應(yīng),取不到值。問了度娘只有才發(fā)現(xiàn)原來是使用下面的方式取值:
[javascript]
view plaincopyprint?$("#dd").datebox("getValue");
[javascript]
view plaincopyprint?$("#dd").datebox("getValue");
當(dāng)然這種方式不是太符合我們習(xí)慣,那么我們可以給它添加一個事件監(jiān)聽,在datebox onSelect 日期選中后,自動為input id="dd" type="text"賦值,然后我們就可以使用 $("#dd").val()獲取選中的日期值了。
具體代碼如下:
[javascript]
view plaincopyprint?"text/javascript"> $(document).ready(function(){ $("#dd").datebox({ required:true, onSelect: function(date){ $("#dd").val(date); } }); });
[javascript]
view plaincopyprint?"text/javascript"> $(document).ready(function(){ $("#dd").datebox({ required:true, onSelect: function(date){ $("#dd").val(date); } }); });
3) javascript設(shè)置datebox的值
[javascript]
view plaincopyprint?$("#dd").datebox("setValue", "2012-01-01");
[javascript]
view plaincopyprint?$("#dd").datebox("setValue", "2012-01-01");
補(bǔ)充:
需求場景:當(dāng)我們需要把datebox中的設(shè)置的值,取得后返回一個Date類型的時候,就發(fā)現(xiàn)有些不好辦了?
錯誤用法:
[javascript]
view plaincopyprint?var tempStr = $("#dd").datebox("getValue"); var tempDate = new Date(tempStr); return tempDate;
[javascript]
view plaincopyprint?var tempStr = $("#dd").datebox("getValue"); var tempDate = new Date(tempStr); return tempDate;
發(fā)現(xiàn)在FireFox下,這樣做是沒有問題的;但是IE下就不起作用了,datebox("getValue")能返回正確的只字符串,例如“2012-01-01",但是new Date(str)的時候返回為NaN;
查了下Date的API發(fā)現(xiàn),new Date(str) 調(diào)用了 Date.parse(str) 函數(shù), 但是在IE下該函數(shù)默認(rèn)支持Str格式為:
MM-dd-yyyy HH:mm:ss所以我們給定的字符串不是這種格式的,那么就解析不了。
找到原因之后,就好解決了,下面提供一個自己是是實現(xiàn)的函數(shù) parseDate(dateStr)
[javascript]
view plaincopyprint?function parseDate(dateStr){ var strArray = dateStr.split("-"); if(strArray.length == 3){ return new Date(strArray[0], strArray[1], strArray[2]); }else{ return new Date(); } }
[javascript]
view plaincopyprint?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,終于知道怎么用了