WdatePicker-限制日期選擇
阿新 • • 發佈:2017-05-23
star name 初始 clas %d 代碼 js代碼 開始時間 時間值
場景:
1. 開始時間,和結束時間最大選擇今天。
2. 開始時間和結束時間的最大時間間隔為30天。
jsp代碼:
<!-- 時間段 --> <form> <!-- 開始時間格式規則直接綁定在input上 --> 開始時間: <input type="text" style="line-height: 12px;" id="start_time_id" readonly="readonly" class="Wdate" name="start_time_name" onClick="WdatePicker({readOnly:true,dateFmt:‘yyyy-MM-dd ‘,maxDate:‘#F{$dp.$D(\‘end_time_id\‘)||\‘%y-%M-%d\‘}‘,minDate:‘#F{$dp.$D(\‘end_time_id\‘,{d:-29})}‘})"onchange="setEndTimeDurationWhileStartTimeChange();"/> <!-- 結束時間格式規則在js中進行及時調整 --> 結束時間: <input type="text" style="line-height: 12px;" id="end_time_id" class="Wdate" name="end_time_name" readonly="readonly"/> </form>
js代碼:
// 結束時間:初始默認最大日期為今天 $(function(){// 設置結束時間的最大可取值為today $(‘#end_time_id‘).unbind("click"); $(‘#end_time_id‘).bind("click",function(){ WdatePicker({ readOnly:true, dateFmt:‘yyyy-MM-dd ‘, minDate:‘#F{$dp.$D(\‘start_time_id\‘)}‘, maxDate:‘#F{\‘%y-%M-%d\‘}‘ }); }); });// 開始時間值改變時,改變結束時間值得範圍 function setEndTimeDurationWhileStartTimeChange(){ var start = $(‘#start_time_id‘).val(); // 格式:2017-05-01 // 如果選中了開始時間 if(start != "" && start != null){ // endMaxDate = 開始時間+29天 start = start.replace(/-/g,"/"); var endMaxDate = new Date(start); endMaxDate.setDate(endMaxDate.getDate()+29); // today = 今天 var today = new Date(); today.setHours(0); today.setMinutes(0); today.setSeconds(0); today.setMilliseconds(0); // 如果endMaxDate>today if(endMaxDate.getTime()>today.getTime()){ // 設置結束時間的最大可取值為today $(‘#end_time_id‘).unbind("click"); $(‘#end_time_id‘).bind("click",function(){ WdatePicker({ readOnly:true, dateFmt:‘yyyy-MM-dd ‘, minDate:‘#F{$dp.$D(\‘start_time_id\‘)}‘, maxDate:‘#F{\‘%y-%M-%d\‘}‘ }); }); }else{ // 設置結束時間的最大可取值為endMaxDate $(‘#end_time_id‘).unbind("click"); $(‘#end_time_id‘).bind("click",function(){ WdatePicker({ readOnly:true, dateFmt:‘yyyy-MM-dd ‘, minDate:‘#F{$dp.$D(\‘start_time_id\‘)}‘, maxDate:‘#F{$dp.$D(\‘start_time_id\‘,{d:29})}‘ }); }); } } // 如果清空了開始時間,重設結束時間的範圍,到今天為止 else{ // 設置結束時間的最大可取值為today $(‘#end_time_id‘).unbind("click"); $(‘#end_time_id‘).bind("click",function(){ WdatePicker({ readOnly:true, dateFmt:‘yyyy-MM-dd ‘, minDate:‘#F{$dp.$D(\‘start_time_id\‘)}‘, maxDate:‘#F{\‘%y-%M-%d\‘}‘ }); }); } }
WdatePicker-限制日期選擇