【layui】日期范围分开两个input，开始日期选中时，结束日期的最小可选择就是开始日期

 

效果如图：

 

 

 

 

 

 

 

 

代码

 

/**
 * 日期格式化
 */
Date.prototype.Format = function (fmt) {
    if (undefined == fmt || null == fmt) {
        fmt = "yyyy-MM-dd HH:mm:ss";
    }
    var t = this;
    var tf = function (str, len) {
        if (str.length < len) {
            for (var i = 0; i < len - str.length; i++) {
                str = "0" + str;
            }
        }
        return str
    };
    var opt = {
        "y+": t.getFullYear().toString(),        // 年
        "M+": (t.getMonth() + 1).toString(),     // 月
        "d+": t.getDate().toString(),            // 日
        "H+": t.getHours().toString(),           // 时
        "m+": t.getMinutes().toString(),         // 分
        "s+": t.getSeconds().toString()          // 秒
        // 有其他格式化字符需求可以继续添加，必须转化成字符串
    };
    var ret;
    for (var k in opt) {
        ret = new RegExp("(" + k + ")").exec(fmt);
        if (ret) {
            fmt = fmt.replace(ret[1], ret[1].length == 1 ? opt[k] : tf(opt[k], ret[1].length));
        }
    }
    return fmt;
}


/**
 * 日期yyyy-MM-dd范围初始化
 *
 * @param laydate layui.laydate
 * @param startDateId 开始日期id
 * @param endDateId  结束日期id
 */
function laydateDateRange(laydate, startDateId, endDateId) {
    if (!laydate || !startDateId || !endDateId) {
        return;
    }
    var startDate = document.getElementById(startDateId);
    var endDate = document.getElementById(endDateId);
    if (!startDate || !endDate) {
        return;
    }
    startDate.setAttribute('autocomplete','off');
    startDate.setAttribute('readonly','true');
    endDate.setAttribute('autocomplete','off');
    endDate.setAttribute('readonly','true');
    var startDateLaydate = laydate.render({
        elem: '#' + startDateId,
        max: new Date().Format("yyyy-MM-dd"),
        type: 'date'
        , done: function (value, date, endDate) {
            if (!value) {
                endDateLaydate.config.min = '1970-1-1';
            } else {
                endDateLaydate.config.min = {
                    year: date.year,
                    month: date.month - 1,
                    date: date.date
                };
            }
        }
    });
    var endDateLaydate = laydate.render({
        elem: '#' + endDateId,
        max: new Date().Format("yyyy-MM-dd"),
        type: 'date'
        , done: function (value, date, endDate) {
            if (!value) {
                startDateLaydate.config.max = {
                    year: new Date().getFullYear(),
                    month: new Date().getMonth(),
                    date: new Date().getDate()
                };
            } else {
                startDateLaydate.config.max = {
                    year: date.year,
                    month: date.month - 1,
                    date: date.date
                };
            }
        }
    });
}

 

使用（form可以不用）

layui.use(['form', 'laydate'], function () {
    var form = layui.form;
    var laydate = layui.laydate;
    laydateDateRange(laydate, "startDate", "endDate");
    form.render();
});

 

注：laydate需要传进来，避免一个页面多个地方使用laydate导致点击闪退问题

 

是对日期范围的另一种使用，laydate自带的日期范围，有客户不喜欢，因为翻页会把两个页面翻过去