1. 程式人生 > >WdatePicker-限制日期選擇

WdatePicker-限制日期選擇

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-限制日期選擇