JS選擇日期控制元件。需要使當前日期以後的日期不能選擇
阿新 • • 發佈:2019-01-30
$.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()});