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

Question

我有两个输入字段：

<input type="date" id="start">

和

<input type="date" id="end">

有没有一种方法可以根据用户在“开始”输入中选择的日期来禁用“结束”输入字段中的先前日期。

例如：如果用户在开始输入字段中选择“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

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

$("#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" />