CODEWITHSUNDEEP
htmlformsdate
Salvatore Dibenedetto
Salvatore Dibenedetto

Reputation: 1043

HTML5 input type date disable dates before today

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.

Upvotes: 7

Views: 44020

Answers (4)

Shiyan Sirisena sam
Shiyan Sirisena sam

Reputation: 226

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">

Upvotes: 0

Albin C S
Albin C S

Reputation: 348

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>

Upvotes: 5

Simple Test
Simple Test

Reputation: 157

You can try this:

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

Upvotes: 0

Emre Bolat
Emre Bolat

Reputation: 4552

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

Upvotes: 15

Related Questions