Disable past date in HTML5 calendar

Question

Is there any way to prevent the user to select a past date from HTML5 calendar or how to hide the past date in html5 calendar? I just need the user to select the current date or future, not past date Can you help me with this, please? I don't want to use any plugin

 <input id="start" type="date" data-date-inline-picker="true" class="form-control" name="date"> 

Answer 1

You can do that by specifying the min value to today's date. The date must be in ISO format (yyyy-mm-dd) like this

 <input id="start" type="date" data-date-inline-picker="true" class="form-control" name="date" min="2018-01-06"> 

The min and max attributes must be a full date; there's no way to specify "today" or "+0". To do that dynamically, you'll need to use JavaScript or a server-side language like this:

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

 <input id="start" type="date" data-date-inline-picker="true" class="form-control" name="date" > 

Answer 2

You will need javascript to do it:

 var today = new Date(); var dd = today.getDate(); var mm = today.getMonth() + 1; var yyyy = today.getFullYear(); if(dd<10){ dd='0'+dd } if(mm<10){ mm='0'+mm } today = yyyy+'-'+mm+'-'+dd; document.getElementById("start").setAttribute("min", today); 

 <input id="start" type="date" data-date-inline-picker="true" class="form-control" name="date" min="">