WdatePicker-限制日期选择

Posted 2020-09-19 迷失之路

场景：

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\‘}‘
            });
        });
    }
}