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

Question

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>

What? What calendar? You haven't provided any HTML. What are you even asking? — Unlocked, Mar 12 '17 at 07:06
I have edited my question by adding the code. Please do review it — sikanderkhursheed, Mar 12 '17 at 07:19
Possible duplicate of [Disable certain dates from html5 datepicker](http://stackoverflow.com/questions/17182544/disable-certain-dates-from-html5-datepicker) — Jack Koppa, Mar 12 '17 at 07:41

score 3 · Accepted Answer · edited May 23 '17 at 11:54

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>

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

1 Answers1