WdatePicker-限制日期选择

深碍√TFBOYSˉ_ 2022-03-12 15:20 436阅读 0赞

场景：

1. 开始时间,和结束时间最大选择今天。

2. 开始时间和结束时间的最大时间间隔为30天。

jsp代码：

<form>
        
        开始时间：
        <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})}'})" 
        οnchange="setEndTimeDurationWhileStartTimeChange();"/>
        
        
        结束时间：
        <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\'}'
                });
            });
        }
    }