Bootstrap日期控件之日期范围控制

 开始日期不大于结束时间,结束时间不小于开始时间,开始日期和结束日期都不小于当前日期:

DatePicker($("#startDate"), $("#endDate"));
function DatePicker(startDate, endDate) {
    // 仅选择日期
    $("#startDate").datetimepicker({
            language: "zh-CN",
            weekStart: 1,
            autoclose: true,
            startView: 2,
            minView: 2,
            format: "yyyy-mm-dd",
            startDate: new Date(),
            forceParse: false,
        }).on('changeDate', function (ev) {
        if (ev.date) {
            $(endDate).datetimepicker('setStartDate', new Date(ev.date.valueOf()))
        } else {
            $(endDate).datetimepicker('setStartDate', null);
        }
    })

    $("#endDate").datetimepicker({
            language: "zh-CN",
            autoclose: true,
            startView: 2,
            minView: 2,
            format: "yyyy-mm-dd",
            startDate: new Date()
        }).on('changeDate', function (ev) {
        if (ev.date) {
            $(startDate).datetimepicker('setEndDate', new Date(ev.date.valueOf()))
        } else {
            $(startDate).datetimepicker('setEndDate', new Date());
        }

    })
}

可简化为:

function DatePicker(startDateInput, endDateInput) {
    // 仅选择日期
    startDateInput.on('changeDate', function (ev) {
        if (ev.date) {
            $(endDateInput).datetimepicker('setStartDate', new Date(ev.date.valueOf()))
        } else {
            $(endDateInput).datetimepicker('setStartDate', null);
        }
    })
    endDateInput.on('changeDate', function (ev) {
        if (ev.date) {
            $(startDateInput).datetimepicker('setEndDate', new Date(ev.date.valueOf()))
        } else {
            $(startDateInput).datetimepicker('setEndDate', new Date());
        }
    })
}

要清空日期的关联的时候只要重新将startDate和endDate重新赋值即可

代码如下:

function clearDatePicker(startDateInput, endDateInput) {
    // 仅选择日期
    startDateInput.datetimepicker('setEndDate', new Date());
    startDateInput.datetimepicker('setStartDate',null);

    endDateInput.datetimepicker('setStartDate', null);
    endDateInput.datetimepicker('setEndDate', new Date());
} 

 

你可能感兴趣的:(JS)