laydate控件 实现开始日期与结束日期的大小关联

laydate 日期选择,实现开始日期的选择只能小于结束日期,结束时间的选择只能小于当前日期

HTML:

<li>
          <label>时间</label>
          <input type="text" id="startTime" class="QItem" name="startTime1"/>
          <label>至</label>
          <input type="text" id="endTime" class="QItem" name="endTime1"/>
</li>

js:

$(function($){
    var myDate = new Date();
    var startDateTap = myDate - 259200000; // 开始时间比当前时间小三天,259200000毫秒 = 3天
    var startDate = new Date(startDateTap);
    var startTime1 = document.getElementById('startTime1');
    var endTime1 = document.getElementById('endTime1');
    var year = myDate .getFullYear();
    var month = myDate .getMonth()+1;
    var day = myDate .getDate();
    var year1 = endDate.getFullYear();
    var month1 = endDate.getMonth()+1;
    var day1 = endDate.getDate();
    // 赋时间初值
    startTime1.value = year +'-'+ add0(month) + '-' + add0(day);
    endTime1.value = year1 +'-'+ add0(month1) + '-' + add0(day1);

    //设置开始时间
    var startDate1 = laydate.render({
        elem:'#startTime1',
        trigger: 'click',
        max: year + '-' + month + '-' + day,
        done:function (value, date) {
            if (value !== '') {
                endDate1.config.min.year = date.year;
                endDate1.config.min.month = date.month - 1;
                endDate1.config.min.date = date.date;
            } else {
                endDate1.config.min.year = '';
                endDate1.config.min.month = '';
                endDate1.config.min.date = '';
            }
            startTime1 = value;
        }
    });
    //设置结束时间
    var endDate1 = laydate.render({
        elem:'#endTime1',
        trigger: 'click',
        min: -3,
        max: year + '-' + month + '-' + day,
        done:function (value, date) {
            if (value !== '') {
                startDate1.config.max.year = date.year;
                startDate1.config.max.month = date.month - 1;
                startDate1.config.max.date = date.date;
            } else {
                startDate1.config.max.year = '';
                startDate1.config.max.month = '';
                startDate1.config.max.date = '';
            }
            endDate1.config.max.year = year;
            endDate1.config.max.month = month-1;
            endDate1.config.max.date = day;
            endTime1 = value;
        }
    });
    // 给小于10 的月、日加前置0
    function add0(m){
        return m < 10 ? '0'+ m : m ;
    }
});

效果图:

laydate月份选择:

HTML:

<label >时间</label>
<input type="text" id="startTime2" class="QItem" name="startTime2"/>
<label>至</label>
<input type="text" id="endTime2" class="QItem" name="endTime2"/>

js:不知道为什么月份选择done事件无法触发,只能使用change了。

if($(".layui-laydate").length){
                $(".layui-laydate").remove();
            }

用来点击后关闭弹窗

$(function($){
    var myDate = new Date();
    var startTime2 = document.getElementById('startTime2');
    var endTime2 = document.getElementById('endTime2');
    var year = myDate.getFullYear();
    var month = myDate.getMonth()+1;
    var day = myDate.getDate();
    // 赋时间初值,开始时间比结束时间早一个月
    if (month1 == 1){
            startTime2.value = (year - 1) +'-'+ 12;
            endTime2.value = year +'-'+ add0(month) ;
        } else {
            startTime2.value = year +'-'+ add0(month-1);
            endTime2.value = year +'-'+ add0(month) ;
        }

    //设置开始时间
    var startDate2 = laydate.render({
        elem:'#startTime2',
        trigger: 'click',
        type: 'month',
        showBottom: false,
        max: year+'-'+month,
        change:function (value, date, endDate) {
            if (value !== '') {
                endDate2.config.min.year = date.year;
                endDate2.config.min.month = date.month - 1;
            } else {
                endDate2.config.min.year = '';
                endDate2.config.min.month = '';
            }
            startDate2.config.max.year = year;
            startDate2.config.max.month = month-1;
            $('#startTime2').val(value);
            if($(".layui-laydate").length){
                $(".layui-laydate").remove();
            }
        }
    });
    //设置结束时间
    var endDate2 = laydate.render({
        elem:'#endTime2',
        trigger: 'click',
        type: 'month',
        //format: 'yyyy年MM月',
        showBottom: false,
        min: -31,
        max: year+'-'+month,
        change:function (value, date, endDate) {
            if (value !== '') {
                startDate2.config.max.year = date.year;
                startDate2.config.max.month = date.month - 1;
            } else {
                startDate2.config.max.year = year;
                startDate2.config.max.month = month-1;
            }
            endDate2.config.max.year = year;
            endDate2.config.max.month = month-1;
            $('#endTime2').val(value);
            if($(".layui-laydate").length){
                $(".layui-laydate").remove();
            }
        }
    });
    // 给小于10 的月、日加前置0
    function add0(m){
        return m < 10 ? '0'+ m : m ;
    }
});

效果图:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值