HTML5 input type date disable dates before today

Question

Is there a way to disable dates before today in HTML5?

<input type="date">

I tried this

<input type="date" min="<?php echo $today; ?>">

but this works only on desktop browsers... safari mobile still allow dates prior to today.

The input type date is not integrate by all browser. I think you must use a JS library. caniuse.com/#feat=input-datetime — Alexis
– Alexis, Commented Jul 28, 2016 at 13:52
Does this answer your question? Set date input field's max date to today — T J
– T J, Commented May 6, 2021 at 19:15

Emre Bolat · Accepted Answer · 2016-07-28 14:01:46Z

15

Input date must be in ISO format (which is supported by mobile browsers).

There is no possible way to do this with pure HTML5.

But with Javascript, you can do something like:

<input name="setTodaysDate" type="date">

and;

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

This little script will change the min with today's date in ISO format.

Live example here: jsFiddle

answered Jul 28, 2016 at 14:01

Emre Bolat

4,5626 gold badges31 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Zsolt Meszaros · Accepted Answer · 2021-01-07 22:39:45Z

5

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);

<input id="datefield" type='date' min='1899-01-01' max='2000-13-13'></input>

edited Jan 7, 2021 at 22:39

Zsolt Meszaros

23.3k19 gold badges60 silver badges70 bronze badges

answered Jan 7, 2021 at 8:52

Albin C S

3482 silver badges5 bronze badges

2 Comments

Heretic Monkey Over a year ago

No need for almost all of this code: just use var today = new Date().toISOString().slice(0,10);

Deian Over a year ago

@HereticMonkey you have a bit of a problem with ISO cause it might get the next day - it depends on your timezone ..

Dino · Accepted Answer · 2019-11-07 07:54:18Z

0

You can try this:

<input type="date" name="bday" min="<?= date('Y-m-d'); ?>">

edited Nov 7, 2019 at 7:54

Dino

8,37213 gold badges50 silver badges93 bronze badges

answered Nov 6, 2019 at 20:57

Simple Test

1571 silver badge4 bronze badges

Comments

Lee Taylor · Accepted Answer · 2022-06-18 22:47:03Z

0

if you are using jQuery try this. First add id to your element

<input type="date" id="minDate">

then in between script tag put below code

$(document).ready(function () {
    var today = new Date().toISOString().split('T')[0];
    $("#minDate").attr('min', today);
});

It should work fine

$(document).ready(function() {
  var today = new Date().toISOString().split('T')[0];
  $("#minDate").attr('min', today);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="date" id="minDate">

edited Jun 18, 2022 at 22:47

Lee Taylor

7,99416 gold badges38 silver badges53 bronze badges

answered Jun 15, 2022 at 8:27

Shiyan Sirisena sam

2663 silver badges4 bronze badges

Collectives™ on Stack Overflow

HTML5 input type date disable dates before today

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related