Set date input field's max date to today - html

Question

I just have a simple line of code like this:
<input type='date' min='1899-01-01' max='2000-01-01'></input>
Is there a simple way to set the max date to "today" instead of 2000-01-01? Or do I have to use Javascript to do this?

Answer 1

JavaScript only simple solution
datePickerId.max = new Date().toISOString().split("T")[0];
<input type="date" id="datePickerId" />
// below trick also works! Thanks jymbob for the comment.
datePickerId.max = new Date().toLocaleDateString('fr-ca')

Answer 2

You will need Javascript to do this:
HTML
<input id="datefield" type='date' min='1899-01-01' max='2000-13-13'></input>
JS
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth() + 1; //January is 0!
var yyyy = today.getFullYear();
if (dd < 10) {
dd = '0' + dd;
}
if (mm < 10) {
mm = '0' + mm;
}
today = yyyy + '-' + mm + '-' + dd;
document.getElementById("datefield").setAttribute("max", today);
JSFiddle demo

Answer 3

In lieu of Javascript, a shorter PHP-based solution could be:
<input type="date" name="date1" max="<?= date('Y-m-d'); ?>">

Answer 4

Javascript will be required; for example:
$(function(){
$('[type="date"]').prop('max', function(){
return new Date().toJSON().split('T')[0];
});
});
JSFiddle demo

Answer 5

toISOString() will give current UTC Date. So to get the current local time we have to get getTimezoneOffset() and subtract it from current time
document.getElementById('dt').max = new Date(new Date().getTime() - new Date().getTimezoneOffset() * 60000).toISOString().split("T")[0];
<input type="date" min='1899-01-01' id="dt" />

Answer 6

Is you don't want to use external scripts, but rather set the max limit right in the HTML input element, inline as so:
<input type="date" max="3000-01-01" onfocus="this.max=new Date().toISOString().split('T')[0]" />
I've intentionally added the max attribute with a date far into the future, because it seems Chrome browser change the width of the field once a max attribute is set, so to avoid that, I had it pre-set.
See live demo

Answer 7

I am using Laravel 7.x with blade templating and I use:
<input ... max="{{ now()->toDateString('Y-m-d') }}">

Answer 8

Yes, and no. There are min and max attributes in HTML 5, but
The max attribute will not work for dates and time in Internet Explorer 10+ or Firefox, since IE 10+ and Firefox does not support these input types.
EDIT: Firefox now does support it
So if you are confused by the documentation of that attributes, yet it doesn't work, that's why.
See the W3 page for the versions.
I find it easiest to use Javascript, s the other answers say, since you can just use a pre-made module. Also, many Javascript date picker libraries have a min/max setting and have that nice calendar look.

Answer 9

An alternative to .split("T")[0] without creating a string array in memory, using String.slice():
new Date().toISOString().slice(0, -14)
datePickerId.max = new Date().toISOString().slice(0, -14);
<input type="date" id="datePickerId" />

Answer 10

Examples with jQuery and JavaScript:
$('#arrival_date').attr('min', new Date().toISOString().split('T')[0])
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="date" name="arrival_date" id="arrival_date" class="form-control" aria-label="...">
document.getElementById('arrival_date').setAttribute('min', new Date().toISOString().split('T')[0])
<input type="date" name="arrival_date" id="arrival_date" class="form-control" aria-label="...">

Answer 11

it can be useful :
If you want to do it with Symfony forms :
$today = new DateTime('now');
$formBuilder->add('startDate', DateType::class, array(
'widget' => 'single_text',
'data' => new \DateTime(),
'attr' => ['min' => $today->format('Y-m-d')]
));

Answer 12

A short but may be less readable version of one of the previous answers.
<script type="text/javascript">
$(document).ready(DOM_Load);
function DOM_Load (e) {
$("#datefield").on("click", dateOfBirth_Click);
}
function dateOfBirth_Click(e) {
let today = new Date();
$("#datefield").prop("max", `${today.getUTCFullYear()}-${(today.getUTCMonth() + 1).toString().padStart(2, "0")}-${today.getUTCDate().toString().padStart(2, "0")}`);
}
</script>

Answer 13

Yes... you have to use Javascript. My solution below is just yet another option which you can pick up.
var today = new Date().toJSON().slice(0, 10);
var date = $('#date-picker');
date.attr('max', today);

Answer 14

Example with React
import Input from "./components/Input";
const DateInput = () => {
const today = new Date().toISOString().split("T")[0];
return <Input type="date" max={today} />
}
export default DateInput;

Answer 15

Template: ejs
Using Node.js, express.js and template System ejs:
<input id="picOfDayDate" type="date" name="date-today"
value="<%= new Date().toISOString().split("T")[0] %>"
min='1995-06-16'
max="<%= new Date().toISOString().split("T")[0] %>"
class="datepicker"
>

Answer 16

I also had same issue .I build it trough this way.I used struts 2 framework.
<script type="text/javascript">
$(document).ready(function () {
var year = (new Date).getFullYear();
$( "#effectiveDateId" ).datepicker({dateFormat: "mm/dd/yy", maxDate:
0});
});
</script>
<s:textfield name="effectiveDate" cssClass="input-large"
key="label.warrantRateMappingToPropertyTypeForm.effectiveDate"
id="effectiveDateId" required="true"/>
This worked for me.