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