如何实现jQuery datetimepicker开始日期小于结束日期的选择限制

需求：实现当选择结束日期时，无法选择已选开始日期之前的日期；同时选择开始日期后，结束日期不能早于开始日期。

实现代码 #

var dateFormat = "mm/dd/yy",
    // 初始化开始日期选择器
    startDate = $("#startDate")
        .datetimepicker({
            defaultDate: "+1w", // 默认选中一周后的日期
            changeMonth: true, // 允许切换月份
            numberOfMonths: 3, // 同时显示3个月份
            timepicker: false // 关闭时间选择，只显示日期
        })
        .on("change", function(e) {
            e.stopPropagation();
            // 更新结束日期选择器的最小可选日期为当前选中的开始日期
            endDate.datetimepicker("option", "minDate", getDate(this));
        }),
    // 初始化结束日期选择器
    endDate = $("#endDate").datetimepicker({
        defaultDate: "+1w",
        changeMonth: true,
        numberOfMonths: 3,
        timepicker: false
    })
        .on("change", function(e) {
            e.stopPropagation();
            // 更新开始日期选择器的最大可选日期为当前选中的结束日期
            startDate.datetimepicker("option", "maxDate", getDate(this));
        });

// 解析输入框的日期字符串为日期对象，处理解析失败的情况
function getDate(element) {
    var date;
    try {
        date = $.datetimepicker.parseDate(dateFormat, element.value);
    } catch (error) {
        date = null;
    }
    return date;
}

关键逻辑说明 #

• 双向限制：通过给两个日期选择器绑定change事件，互相更新对方的可选日期范围：
  • 选择开始日期后，结束日期的最小可选日期被设置为该开始日期，确保结束日期不会早于开始日期
  • 选择结束日期后，开始日期的最大可选日期被设置为该结束日期，确保开始日期不会晚于结束日期
• 日期解析：getDate函数负责将输入框的字符串日期转换为datetimepicker可识别的日期对象，同时捕获解析错误，避免无效日期导致的组件异常
• 基础配置：关闭时间选择、允许切换月份、显示多个月份，提升用户选择体验

内容的提问来源于stack exchange，提问作者user19686171