设置 minDate 以避免在 html 输入中选择开始日期之前的结束日期

Question

有没有办法不使用 datepicker 而只使用type=date输入来设置最小日期以防止用户在开始日期之前选择结束日期？ 我正在使用引导管理主题：SB Admin 2。

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

Answer 1

 <div> <label> Start Date</label> <input type="date" id="from" value="2021-01-01" min="2018-01-01" max="2018-12-31" disabled> </div> <div class="form-group" > <label>End Date</label> <input type="date" id="to" value="2021-07-22" min="2018-01-01" max="2018-12-31" disabled> </div>

Answer 2

您必须监听from字段上的更改事件并将其更新值设置为to元素。 您可以使用 Jquery 轻松完成

 $("#from").change(function() { //when i select a new date in from field $("#to").attr({ "min": $(this).val() }); //i set the min attribute for the to field as the from one }); $('#to').on('blur',function(){ //let me check if the value is greater than the from one var from = new Date($('#from').val()); var to = new Date($('#to').val()); if(to<from){ console.log('invalid value in to field'); $('#to').val(''); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <label> Start Date</label> <input type="date" id="from"> </div> <div class="form-group"> <label>End Date</label> <input type="date" id="to"> </div>