Disable certain dates from html5 datepicker

Question

Is it possible to disable dates when I use I want to disable current date for one scenario and future dates for other scenario. How should I disable the dates?

Answer 1

You can add a min or max attribute to the input type=date. The date must be in ISO format (yyyy-mm-dd). This is supported in many mobile browsers and current versions of Chrome, although users can manually enter an invalid date without using the datepicker.

<input name="somedate" type="date" min="2013-12-25">

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

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

http://jsfiddle.net/mblase75/kz7d2/

Ruling out only today, while allowing past or future dates, is not an option with here. However, if you meant you want tomorrow to be the min date (blanking out today and all past dates), see this question to increment today by one day.

As in all other cases involving HTML forms, you should always validate the field server-side regardless of how you constrain it client-side.

Answer 2

In pure HTML, the only restrictions you can put on dates are its lower and upper bounds through the min and max attributes. In the example below, only the dates of the week I'm posting this question are allowed, other appear greyed out and clicking on them doesn't update the input value:

<input type="date" min="2019-06-02" max="2019-06-08"/>

You can also disable any invalid date by using a few lines of JavaScript, but this doesn't ship with all the native <input type="date"> features like greyed-out dates. What you can do is set the date value to '' in case of an invalid date, an error message could also be displayed. Here is an example of an input that doesn't accept weekend dates:

// Everything except weekend days
const validate = dateString => {
  const day = (new Date(dateString)).getDay();
  if (day==0 || day==6) {
    return false;
  }
  return true;
}

// Sets the value to '' in case of an invalid date
document.querySelector('input').onchange = evt => {
  if (!validate(evt.target.value)) {
    evt.target.value = '';
  }
}

<input type="date"/>

Answer 3

HTML datepicker (<input type=date>) supports min/max attribute. It is widely supported nowadays.

References:

W3C spec

Answer 4

You could use this to disable future dates :
Inside you document.ready function, place

//Display Only Date till today //

var dtToday = new Date();
var month = dtToday.getMonth() + 1;     // getMonth() is zero-based
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;
$('#dateID').attr('max', maxDate);

and in form

<input id="dateID" type="date"/>

Here is the working jFiddle Demo

Answer 5

For react and similar libraries, you may use this to disable all dates before today.

<input type='date' min={new Date().toISOString().split('T')[0]} >

Answer 6

Depending on what you need, you can also use the step attribute to only enable specific dates - e.g. every Monday, or every other day. You can use it in combination with min and max

e.g. every Monday

<input type="date" step="7" value="2022-04-04">

Every Thursday

<input type="date" step="7" value="2022-04-07">

Every other day

<input type="date" step="2">