Restrict future dates in HTML5 date input - html

Question

I want to restrict a user to only being able to add future dates in a HTML date input.
Instead of jQuery UI date picker I want to add HTML5 calender. Can anyone tell me how can I restrict the input to future dates?

Answer 1

You can use min and max attributes of HTML5 input date
HTML5 code
<input type="date" name="bday" min="2014-05-11" max="2014-05-20">
EDIT
You need to use jQuery to achieve it
jQuery code
$(function(){
var dtToday = new Date();
var month = dtToday.getMonth() + 1;
var day = dtToday.getDate();
var year = dtToday.getFullYear();
if(month < 10)
month = '0' + month.toString();
if(day < 10)
day = '0' + day.toString();
var maxDate = year + '-' + month + '-' + day;
$('#txtDate').attr('max', maxDate);
});
Explanation
max attribute of HTML5 input date takes month and day in double digit format.
Ex: 5 (Month) is not valid whereas 05 (Month) is valid
Ex: 1 (Day) is not valid whereas 01 (Day) is valid
So I have added below code
if(month < 10)
month = '0' + month.toString();
if(day < 10)
day = '0' + day.toString();
Check my updated fiddle
Refer fiddle demo

Answer 2

To build on #Chirag Vidani's answer, the date can be generated with fewer lines like this:
var now = new Date(),
// minimum date the user can choose, in this case now and in the future
minDate = now.toISOString().substring(0,10);
$('#my-date-input').prop('min', minDate);

Answer 3

Here is a PHP solution that gets today's date and sets it as the maximum.
<input type="date" name="bday" max="<?php echo date("Y-m-d"); ?>">
This will put it in the correct double-digit format for the day and month.
https://www.php.net/manual/en/function.date.php

Answer 4

Some others have asked the question about setting the max date to the current date. The suggested answers involve using JavaScript. But my solution was to use the server side language to generate the max parameter for the input. I know the OP didn't ask about a server-side approach. But this solution works well for me using C# Razor as my server language.
On the server I write:
#Html.TextBox("CurrentDate",
Model.CurrentDate.ToString("yyyy-MM-dd"),
new {
#class = "form-control",
#type = "date",
max = DateTime.Now.ToString("yyyy-MM-dd")
})
And then MVC outputs this Html:
<input class="form-control" id="CurrentDate" name="CurrentDate"
type="date" max="2016-11-10" value="2016-11-10">
With other server languages the approach would be to similarly generate the max parameter using the Server's date, which may or may not work if your requirement is to use the Client's date. For my situation the Server's date is what is needed because that's where the data is stored.

Answer 5

Use the max attribute which is the expected upper bound for the element's value.
<input type="date" max="2014-05-15"/>
Reference: http://www.w3.org/TR/html-markup/input.date.html

Answer 6

I have updated the Working fiddle
http://jsfiddle.net/9WVY8/16/
HTML & js:
var dateControler = {
currentDate : null
}
$(document).on( "change", "#txtDate",function( event, ui ) {
var now = new Date();
var selectedDate = new Date($(this).val());
if(selectedDate > now) {
$(this).val(dateControler.currentDate)
} else {
dateControler.currentDate = $(this).val();
}
});

Answer 7

<input type="date" value="<?php echo date("Y-m-d"); ?>" max="<?php echo date("Y-m-d"); ?>">
This worked for me.

Answer 8

Old Question But a solution, may help someone using JQuery:
$(document).ready(function () {
var today = new Date();
var day=today.getDate()>9?today.getDate():"0"+today.getDate(); // format should be "DD" not "D" e.g 09
var month=(today.getMonth()+1)>9?(today.getMonth()+1):"0"+(today.getMonth()+1);
var year=today.getFullYear();
$("#dpFromDate").attr('max', year + "-" + month + "-" + day);
});
The date format should be YYYY-MM-DD.

Answer 9

you can get that only using JS and HTML:
first let's get the actual date
let n = new Date();
let y = n.getFullYear();
let m = n.getMonth() + 1;
let d = n.getDate();
and lets do the minDate and Max date strings, and evaluate if we'll need put a 0 in the month/day to keep the required format:
if(m < 10)
m = '0' + m.toString();
else if(d < 10)
d = '0' + d.toString();
let minDate = y + '-' + m + '-' + d
let maxDate = y + '-' + "0"+(parseFloat(0+m) + 1) + '-' + d
after, lets set it in the HTML:
<input name="Fecha_end" type="date" id="#Fecha_end">
let Fecha_end_input = document.getElementById("#Fecha_end")
Fecha_end_input.setAttribute("min",minDate)
Fecha_end_input.setAttribute("max",maxDate)
Total:
HTML:
<input name="Fecha_end" type="date" id="#Fecha_end">
JS:
let Fecha_end_input = document.getElementById("#Fecha_end")
let n = new Date();
let y = n.getFullYear();
let m = n.getMonth() + 1;
let d = n.getDate();
if(m < 10)
m = '0' + m.toString();
else if(d < 10)
d = '0' + d.toString();
let minDate = y + '-' + m + '-' + d
let maxDate = y + '-' + "0"+(parseFloat(0+m) + 1) + '-' + d
Fecha_end_input.setAttribute("min",minDate)
Fecha_end_input.setAttribute("max",maxDate)

Answer 10

<script>
var today = new Date().toISOString().slice(0, 16);
document.getElementsByName("time_start")[0].max = today;
</script>
and input
id="time_start"