1. 程式人生 > >Jquery UI的日曆控制元件datepicker限制日期

Jquery UI的日曆控制元件datepicker限制日期

現在jquery用的很廣泛,一方面是其強大的庫,另一方面是它的外掛很豐富。最近用了jquery的datepicker外掛,感覺很棒,介面很漂亮,功能齊全,且擴充套件性很好。強烈推薦使用。

專案中有一個需求,要禁用某些日期,比如週末,節假日。看了datepicker的原始碼,發現裡面有一個noWeekends方法可非常簡單地實現禁用週末,請看程式碼:

$("#datepicker").datepicker({
beforeShowDay: $.datepicker.noWeekends
});

如果要禁用某些特定的日期,可定義一個函式實現,如下:

natDays = [
[7, 23,2009], [7, 24,2009], [8, 13,2009], [8, 14,2009],
];

function nationalDays(date) {
for (i = 0; i < natDays.length; i++) {
if (date.getFullYear() == natDays[i][2] && date.getMonth() == natDays[i][0] - 1
&& date.getDate() == natDays[i][1]) {
return [false, natDays[i][2] + '_day'];
}
}
return [true, ''];
}

$("#datepicker").datepicker({
beforeShowDay: nationalDays
});

上面函式的返回值是以個數組,第一個布林值表示是否禁用該日期,true為不禁用,false為禁用。第二個引數是以個樣式名,可自定義被禁用時的樣式。

如果只要求某個時間段的日期可以選擇,通過設定兩個引數可以實現:

$("#datepicker").datepicker({
minDate: new Date(2009, 6, 6),
maxDate: new Date(2009, 7, 14),
});

以上設定表示在2009年5月6號到2009年6月14號是可選的。

現在考慮我自己的應用,我現在要做淡旺季的價格表,如果選擇旺季,日期就不能選擇非旺季的日期,淡季和平季也是如此。

這樣乍看起來需要界定一個日期範圍,但是研究樓上的原始碼後看到,只需要限定月份就行了。因為每個淡旺季的開頭和結尾都是以自然月的1號和30號(31,28號)為結束的,所以陣列那裡只需要一個值,而不需要三個值來判斷。對於一般的應用,最多也是需要兩個,也就是日期和月份,年份幾乎每年都一樣。

另外一個變通點,起始日期的選擇。如果旺季開始於7月,當前日期是5月,那麼日曆的起始日期應該是7月1日。如果當前日期正好處於旺季,那麼就從當天開始作為日期的起始點。

第三,我必須要從一個隱藏元素中獲取當前的季節特徵,淡季,平季還是旺季,不同的季節有不同的價格。那麼因為各個瀏覽器對於瀏覽器載入元素的時機不同,所以決定放在jquery的$(function(){});裡面。

於是就有了如下的js

var d=new Date();
var y=d.getFullYear();
var m=d.getMonth()+1;
var day=d.getDate();


function nationalDays(date) {
	for (i = 0; i < natDays.length; i++) {
		if (date.getMonth() == natDays[i][0] - 1) {
			return [false, natDays[i][0] + '_day'];
		}
	}
	return [true, ''];
}

$(function(){
	var season=document.getElementById('season').value;
	if(season=='busy'){
		document.getElementById('seasonTips').innerHTML='旺季的月份選擇只能是4月5月9月10月11月'
		if(m>1 && m<4){
			mindate=y+'-4-1';
		}else if(m>5&&m<9){
			mindate=y+'-9-1';
		}else if(m>11){
			mindate=y+1+'-4-1';
		}else{
			mindate=y+'-'+m+'-'+day;
		}
		//旺季4,5,9,10,11
		natDays=[[1],[2],[3],[6], [7], [8],[12],];
	}else if(season=='common'){
		document.getElementById('seasonTips').innerHTML='平季的月份選擇只能是3月6月7月8月';
		if(m<3){
			mindate=y+'-3-1';
		}else if(m>3 && m<6){
			mindate=y+'-6-1';
		}else if(m>8){
			mindate=y+1+'-3-1'
		}else{
			mindate=y+'-'+m+'-'+day;
		}
		//平3678
		natDays=[[1],[2],[4],[5],[9],[10],[11],[12],];
	}else if(season=='dull'){
		document.getElementById('seasonTips').innerHTML='淡季的月份選擇只能是1月2月和12月';
		if(m>2 && m<12){
			mindate=y+'-12-1';
		}else{
			mindate=y+'-'+m+'-'+day;
		}
		//淡季12.1.2,禁用345678910
		natDays=[[3],[4],[5],[6],[7],[8],[9],[10],[11],];
	}
	// Datepicker
		$('.Wdate').datepicker({
			numberOfMonths:2,
			showButtonPanel:false,
			dateFormat: 'yy-mm-dd',
			minDate: mindate,
			beforeShowDay: nationalDays,
		});
});