1. 程式人生 > >jquery easyui datebox 的使用

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

  1. <inputid="dd"type="text"></input>
  1. $('#dd').datebox({  
  2.     required:true
  3. });  

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,終於知道怎麼用了。

參考資料: