Question

如何使用以下html代码禁用日历中的先前日期？

     <div class="form-group">
  <label for="rank" class="cols-sm-2 control-label">Date</label>
   <div class="cols-sm-10">
    <div class="input-group">
     <span class="input-group-addon"><i class="fa fa-calendar" aria-hidden="true"></i></span>
     <input type="date"  id="txtDate" required="Required" class="form-control" name="txtDate" placeholder="Select suitable date" />
    </div>
  </div>
       </div>

Answer 1

问题here的答案与您正在寻找的答案非常相似。简而言之，您可以在min上设置<input>属性，并且不允许选择该最小值之前的日期。要动态设置最小值，请使用一些JavaScript，如下面的代码段所示。

var today = new Date().toISOString().split('T')[0];
document.getElementsByName("txtDate")[0].setAttribute('min', today);

<div class="form-group">
  <label for="rank" class="cols-sm-2 control-label">Date</label>
   <div class="cols-sm-10">
    <div class="input-group">
     <span class="input-group-addon"><i class="fa fa-calendar" aria-hidden="true"></i></span>
     <input type="date"  id="txtDate" required="Required" class="form-control" name="txtDate" placeholder="Select suitable date" />
    </div>
  </div>
</div>

如何在日历中禁用过去的日期？使用HTML0

1 个答案: