如何用JavaScript/jQuery无插件限制结束日期不可早于开始日期

实现原理 #

• 直接利用HTML5原生type="date"输入框的内置min属性，浏览器会自动禁用早于min值的日期选项，无需依赖第三方插件
• 监听开始日期的选中事件，动态更新结束日期的min属性值即可实现需求
• input[type=date]的返回值统一为YYYY-MM-DD格式的字符串，可直接通过字符串比较判断日期大小，不需要额外格式转换
• 额外补充异常校验，避免先选结束日期后选更早的开始日期导致的逻辑冲突

原生JavaScript实现（无任何依赖） #

直接引入以下代码即可生效：

// 获取两个日期输入框元素
const startDateInput = document.getElementById('startDate');
const endDateInput = document.getElementById('endDate');

// 监听开始日期变化事件
startDateInput.addEventListener('change', function() {
  const selectedStartDate = this.value;
  if (selectedStartDate) {
    // 设置结束日期的最小可选日期为选中的开始日期
    endDateInput.min = selectedStartDate;
    // 如果已选的结束日期早于新的开始日期，自动清空结束日期
    if (endDateInput.value && endDateInput.value < selectedStartDate) {
      endDateInput.value = '';
    }
  } else {
    // 清空开始日期时同步移除结束日期的选择限制
    endDateInput.removeAttribute('min');
  }
});

jQuery实现（仅依赖基础jQuery，无需额外插件） #

如果项目已经引入jQuery，可使用以下更简洁的代码：

$('#startDate').on('change', function() {
  const startVal = $(this).val();
  if (startVal) {
    $('#endDate').attr('min', startVal);
    if ($('#endDate').val() && $('#endDate').val() < startVal) {
      $('#endDate').val('');
    }
  } else {
    $('#endDate').removeAttr('min');
  }
});

可选增强：双向限制日期范围 #

如果需要同时限制开始日期不能晚于已选的结束日期，可补充以下代码（原生JS示例）：

endDateInput.addEventListener('change', function() {
  const selectedEndDate = this.value;
  if (selectedEndDate) {
    startDateInput.max = selectedEndDate;
    if (startDateInput.value && startDateInput.value > selectedEndDate) {
      startDateInput.value = '';
    }
  } else {
    startDateInput.removeAttribute('max');
  }
});

兼容性说明 #

所有现代浏览器（Chrome、Firefox、Edge、Safari 14及以上版本）均原生支持input[type=date]的min/max属性，无需额外兼容处理。

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