1. 程式人生 > >JS選擇日期控制元件。需要使當前日期以後的日期不能選擇

JS選擇日期控制元件。需要使當前日期以後的日期不能選擇

$.extend($.fn.datebox.defaults.rules,{
	   gtStartDate: {
		   validator: function(value,param){//
			   if(param[0] && value)
			   {
				   if(value.length > 10)
				   {
					   value = value.substring(0,10);
				   }
				   var ed_arr = value.split('-');
				   var endDate = new Date(ed_arr[0],ed_arr[1]-1,ed_arr[2]);
			   var sDate = $(param[0]).datebox('getValue');
			   if(sDate)
			   {
				   if(sDate.length > 10)
				   {
					   sDate = sDate.substring(0,10);
				   }
				   var sd_arr = sDate.split('-');
				   var startDate = new Date(sd_arr[0],sd_arr[1]-1,sd_arr[2]).getTime();
				   if((endDate.getTime() - startDate) > 0)
				   {
					   return true;
				   }
			   }
		   }
		   return false;
	   },
	   message:"結束時間必須大於開始時間"
    	   }
       });
   /*
頁面使用方式:
for="inforCommend.startDate">開始時間:</label></td>
<td><input  class="easyui-datebox" type="text" name="inforCommend.startDate" required=true editable="false"
id="infor_commend_startDate" /></td>
<td width="20"></td>


<td nowrap="nowrap" align="right"><label
for="inforCommend.endDate">結束時間:</label></td>
<td><input class="easyui-datebox"  type="text" name="inforCommend.endDate" editable="false" required=true validType="gtStartDate['#infor_commend_startDate']" invalidMessage="結束時間必須大於開始時間"
id="infor_commend_endDate" /></td>
*/
   $.extend($.fn.datebox.defaults.rules,{
	   ltCurrentDate: {
		   validator: function(value,param){
			   if(value)
			   {
				   if(value.length > 10)
				   {
					   value = value.substring(0,10);
				   }
				   var ed_arr = value.split('-');
				   var selectedDate = new Date(ed_arr[0],ed_arr[1]-1,ed_arr[2]);
				   var currentDate = new Date();
				   if((currentDate.getTime() - selectedDate.getTime()) >= 0)
				   {
					   return true;
				   }
			   }
		   return false;
	   },
	   message:"日期必須小於等於當前日期"
    	   }
       });

 由於專案是使用的easyui 但是查了下easyui datebox 發現沒有提供類似的屬性。

於是自己寫了個ltCurrentDate 的校驗方式。

當表單 提交或滑鼠移開是會進行驗證。如果不合法此會彈出invalidMessage屬性的提示資訊。

驗證了可以使用。但是當提交按鈕和日期input需要頁面滾動才能看到彼此時。問題就來了。表單提交。

觸發驗證,提示資訊已經彈出來了,但是當頁面滾到日期input時,提示資訊是沒有的。而且日期input由於是editable=false的。所以不能獲得focus,所以使用者看不出哪裡不合法。暈了。

於是找來下先jquery ui中的 datepicker外掛不錯,而且支援這個需求。

需要檔案;

 jquery-ui-1.8.21.custom.min.js
<link type="text/css" href="<%=commonCssPath %>/jquery-ui-1.8.21.custom.css" rel="Stylesheet" />  jquery.ui.datepicker-zh-CN.js:
;jQuery(function($){	
	$.datepicker.regional["zh-CN"]={
		closeText:"關閉",
		prevText:"<上月",
		nextText:"下月>",
		currentText:"今天",
		monthNames:["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
		monthNamesShort:["一","二","三","四","五","六","七","八","九","十","十一","十二"],
		dayNames:["星期日","星期一","星期二","星期三","星期四","星期五","星期六"],
		dayNamesShort:["週日","週一","週二","週三","週四","週五","週六"],
		dayNamesMin:["日","一","二","三","四","五","六"],
		weekHeader:"周",
		dateFormat:"yy-mm-dd",
		firstDay:1,
		isRTL:!1,
		showMonthAfterYear:!0,
		yearSuffix:"年"},
		$.datepicker.setDefaults($.datepicker.regional["zh-CN"]);
});

如何使用:

$('#i_startDate').datepicker({maxDate:new Date()});