如何根据用户在startdate字段中选择的日期禁用以前的日期（在enddate字段中）？（使用输入类型“date”

Question

我有两个输入字段：

<代码>

和

<代码>

有没有办法根据用户在“开始”输入中选择的日期，在“结束”输入字段中禁用以前的日期。

E、 g：如果用户在开始输入字段中选择“2022/01/11”，则应自动禁用结束输入字段中之前的所有日期（应仅允许用户选择2022/01/11或更高的日期）。

所有这些都使用javascript。

我所尝试的：

$(function(){
    var dtToday = new Date();
    
    var month = dtToday.getMonth() + 1;
    var day = dtToday.getDate();
    var year = dtToday.getFullYear();
    if(month < 10)
        month = '0' + month.toString();
    if(day < 10)
        day = '0' + day.toString();
    
    var minDate= year + '-' + month + '-' + day;
    
    $('#txtDate').attr('min', minDate);
});

它只适用于一个输入字段。

提前谢谢。

Answer 1

您可以处理开始日期输入的“更改”事件，并使用开始日期输入的值更新结束日期输入的属性：

$("#start").change(function(){
  $("#end").prop("min", $(this).val());
  $("#end").val(""); //clear end date input when start date changes
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="date" id="start" />
<input type="date" id="end" />