sikanderkhursheed sikanderkhursheed - 8 months ago 34
HTML Question

How to make the past dates disable in the calendar? using HTML0

How would I make the previous dates in the calendar disable using the following html code?

<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 Source

The question here has an answer very similar to what you're looking for. In short, you can set a min attribute on your <input>, and it will not allow dates before that minimum to be selected. To set the minimum dynamically, use just a bit of JavaScript, as seen in the snippet below.

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>