CODEWITHSUNDEEP
htmlcalendardisabled-input
sikanderkhursheed
sikanderkhursheed

Reputation: 11

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>

Upvotes: 0

Views: 11640

Answers (1)

Jack Koppa
Jack Koppa

Reputation: 1191

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>

Upvotes: 3

Related Questions