多处使用laydate,上方限制下方时间范围

最新推荐文章于 2022-03-12 09:21:33 发布

原创最新推荐文章于 2022-03-12 09:21:33 发布 · 536 阅读

0 ·

CC 4.0 BY-SA版权

js 同时被 2 个专栏收录

17 篇文章

订阅专栏

layui

7 篇文章

订阅专栏

博客讲述了在页面中多处使用laydate日期选择器时，如何实现上方时间范围限制下方时间选择，确保开始时间不超结束时间，并在上方时间变动时同步更新下方时间的选择策略。内容包括样式设计、页面结构、时间范围封装以及具体的时间处理。

多处使用laydate,上方限制下方时间范围

前言：需求是上方laydate开始与结束时间是一个范围，选定后，下方添加出的每一行数据中，都会调用laydate，但是范围不能超过上方，默认和上面时间一致，当点击上方切换时间时，下方时间同步更换；

1 . 样式

在这里插入图片描述
难点：
1 . 区分每一个laydate选框；
2 . 要求开始时间不能大于结束时间；
3 . 点击上方时间范围下方同步更改；

2 . 页面结构

//根据 data-current="morning" 区分模块                   
<div class="currentBg" data-current="morning">                                                       
     <fieldset class="layui-elem-field clearfix conflictShow pt-10">
         <legend class="std-layui-tab-title sus-second-title fl grey3">
             当前：<i class="layui-icon layui-btn layui-btn-normal layui-btn-xs" onclick="period('morning',this,currentTeacher)">&#xe654;</i>
             其他：<i class="layui-icon layui-btn layui-btn-normal layui-btn-xs" onclick="period('morning',this)">&#xe654;</i>                                
         </legend>
         <div class="layui-inline">
             <label class="layui-form-label">开始时间：</label>
             <div class="layui-input-inline input-100 conflictShow">
                 <input type="text" class="layui-input layui-table-edit ct-starttime"  value="09:00" autocomplete="off"/>
             </div>
         </div>
         <div class="layui-inline">
             <label class="layui-form-label">结束时间：</label>
             <div class="layui-input-inline input-100 conflictShow">
                 <input type="text" class="layui-input layui-table-edit ct-endtime" value="12:00" autocomplete="off"/>                                    
             </div>
         </div>
     </fieldset>
     <div class="layui-form-item">
         <table class="layui-table leftalizer"  lay-even="">
             <colgroup>
                 <col width="100">
                 <col width="100">
                 <col width="100">
                 <col width="100">
                 <col width="100">
                 <col class="conflictShow" width="30">                                
             </colgroup>
             <thead>
                 <tr class="class-title">
                     <th>xxx</th>
                     <th>开始时间</th>
                     <th>结束时间</th>
                     <th>xxx</th>
                     <th>状态</th>                                            
                     <th class="conflictShow">操作</th>
                 </tr>
             </thead>
             <tbody class="periodTable">
             </tbody>
         </table>
     </div>
 </div>

3 . 上方时间范围封装

//默认时间
 var timeRangeOption = {
     'morning': {
         min: '09:00:00',
         max: '12:00:00'
     },
     'afternoon': {
         min: '14:00:00',
         max: '17:00:00'
     },
     'evening': {
         min: '18:00:00',
         max: '21:00:00'
     }
 }; 
 
 // 清空时间选择器秒列
function formatminutes(date) {
    $($(".laydate-time-list li ol")[2]).find("li").remove();
} 

//所有时间插件映射
var layDateObjectMap = {};

// 时间范围
function copeTime(range){
    $('div[data-current=' + range + '] .ct-starttime').each(function(){
    //页面中多块重复区域，根据参数遍历区分；
        laydate.render({
            elem: this,
            type: 'time',
            trigger: 'click',
            format: 'HH:mm',
            btns: ['clear', 'confirm'],
            min:timeRangeOption[range].min,
            max:timeRangeOption[range].max,
            ready: formatminutes,
            done: function (value, date) {
                var that = $(this.elem);
                var endDateValue = $(that).parents('.layui-inline').next().find('.ct-endtime').val();
                var endDate = {
                    hours: 00,
                    minutes: 00
                };
                if(endDateValue){
                    endDate.hours = endDateValue.split(':')[0];
                    endDate.minutes = endDateValue.split(':')[1];
                }
                if (endDate.hours < date.hours || (endDate.hours === date.hours && endDate.minutes < date.minutes)) {
                    layer.msg('开始时间不能大于结束时间');
                    that.val('');
                }else{
                    changeDateRange(this);
                }
            }
        });
    })
    $('div[data-current=' + range + '] .ct-endtime').each(function(){
        laydate.render({
            elem:this,
            type: 'time',
            trigger: 'click',
            format: 'HH:mm',
            btns: ['clear', 'confirm'],
            min:timeRangeOption[range].min,
            max:timeRangeOption[range].max,
            ready: formatminutes,
            done: function (value, endDate) {
                var that = $(this.elem);
                var dateValue = $(that).parents('.layui-inline').prev().find('.ct-starttime').val();
                var date = {
                    hours: 00,
                    minutes: 00
                };
                if(dateValue){
                    date.hours = dateValue.split(':')[0];
                    date.minutes = dateValue.split(':')[1];
                }
                if (endDate.hours < date.hours || (endDate.hours === date.hours && endDate.minutes < date.minutes)) {
                    layer.msg('结束时间不能小于开始时间');
                    that.val('');
                }else{
                    changeDateRange(this);
                }
            }
        }); 
    });
    // 切换时间范围
    function changeDateRange(parentLay){
        $(parentLay.elem).parents('div[data-current]').find('.periodTable tr').each(function(){
            var starttimeInput = $(this).find('.starttime');
            var endtimeInput = $(this).find('.endtime');
            var timeIndex = starttimeInput.data('index');
            var layDateThis = layDateObjectMap[timeIndex];
            layDateThis.forEach(function(datepicker){
                if($(parentLay.elem).hasClass('ct-starttime')){ //如果当前选择的是开始时间
                    datepicker.config.min = parentLay.dateTime; //将当前选择的开始时间设置为列表的时间最小值
                    if(parentLay.dateTime.hours > datepicker.config.dateTime.hours){
                        starttimeInput.val($(parentLay.elem).val());
                    }else if(parentLay.dateTime.hours = datepicker.config.dateTime.hours){
                        if(parentLay.dateTime.minutes > datepicker.config.dateTime.minutes){
                            starttimeInput.val($(parentLay.elem).val());
                        }
                    }
                }else if($(parentLay.elem).hasClass('ct-endtime')){ //如果当前选择的是结束时间
                    datepicker.config.max = parentLay.dateTime; //将当前选择的开始时间设置为列表的时间最大值
                    if(parentLay.dateTime.hours < datepicker.config.dateTime.hours){
                        endtimeInput.val($(parentLay.elem).val());
                    }else if(parentLay.dateTime.hours = datepicker.config.dateTime.hours){
                        if(parentLay.dateTime.minutes < datepicker.config.dateTime.minutes){
                            endtimeInput.val($(parentLay.elem).val());
                        }
                    }
                }
            });
        });
    }  
}

4 . 下方时间

function getlaydate(timeIndex, timeRange,coursetype,coursetime){
    var datepickerStart = laydate.render({
        elem: '#starttime' + timeIndex,//timeIndex为时间戳
        type: 'time',
        trigger: 'click',
        format: 'HH:mm',
        btns: ['clear', 'confirm'],
        min:$('div[data-timerange='+timeRange+'] .ct-starttime').val() + ':00',//上方时间范围限制
        max:$('div[data-timerange='+timeRange+'] .ct-endtime').val() + ':00',
        ready: formatminutes,
        done: function (value, date) {
            var that = $(this.elem);
            var endDateValue =  that.parents('tr').find('input.endtime').val();
            var endDate = {
                hours: 00,
                minutes: 00
            };
            if(endDateValue){
                endDate.hours = endDateValue.split(':')[0];
                endDate.minutes = endDateValue.split(':')[1];
            }
            if (endDate.hours < date.hours || (endDate.hours === date.hours && endDate.minutes < date.minutes)) {
                layer.msg('开始时间不能大于结束时间');
                that.val('');
            } else {
                   ...    
            }
        }
    });
    var datepickerEnd = laydate.render({
        elem: '#endtime' + timeIndex,
        type: 'time',
        trigger: 'click',
        format: 'HH:mm',
        btns: ['clear', 'confirm'],
        min:$('div[data-timerange='+timeRange+'] .ct-starttime').val() + ':00',
        max:$('div[data-timerange='+timeRange+'] .ct-endtime').val() + ':00',
        ready: formatminutes,
        done: function (value, endDate) {
            var that = $(this.elem);
            var dateValue = that.parents('tr').find('input.starttime').val();
            var date = {
                hours: 00,
                minutes: 00
            };
            if(dateValue){
                date.hours = dateValue.split(':')[0];
                date.minutes = dateValue.split(':')[1];
            }
            if (endDate.hours < date.hours || (endDate.hours === date.hours && endDate.minutes < date.minutes)) {
                layer.msg('结束时间不能小于开始时间');
                that.val('');
            } else {
      			...
            }
        }
    });
    layDateObjectMap[timeIndex.toString()] = [datepickerStart, datepickerEnd];
}