zj0208

场景:

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

 

分类:

技术点:

相关文章: