如何不使用datepicker仅用type=date输入框设置minDate防止结束日期早于开始日期

原生<input type="date">自带min属性支持，不需要引入额外datepicker组件，也不会和你使用的SB Admin 2主题产生冲突，只要监听开始日期的变化动态更新结束日期的min值即可实现需求。

实现逻辑 #

• 当用户选中开始日期后，将结束日期的min属性设置为开始日期的选中值
• 浏览器原生的日期选择面板会自动屏蔽所有早于min值的日期，用户无法选中
• 如果用户此前选中的结束日期早于新设置的开始日期，自动清空结束日期的值避免逻辑冲突

完整代码示例 #

HTML部分（适配SB Admin 2样式规范） #

<div class="form-group">
    <label>Start Date</label>
    <input type="date" id="from">
</div>

<div class="form-group">
    <label>End Date</label>
    <input type="date" id="to">
</div>

JS实现（两种写法可选） #

原生JS写法

const fromInput = document.getElementById('from');
const toInput = document.getElementById('to');

fromInput.addEventListener('change', function() {
    if (this.value) {
        toInput.min = this.value;
        // 校验已选结束日期是否符合规则
        if (toInput.value && toInput.value < this.value) {
            toInput.value = '';
        }
    } else {
        // 开始日期清空时解除限制
        toInput.removeAttribute('min');
    }
});

jQuery写法（SB Admin 2默认自带jQuery依赖可直接使用）

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

注意：该方案兼容所有主流现代浏览器，原生date输入框的min属性取值默认匹配YYYY-MM-DD格式，不需要额外做日期格式转换。

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