Disable certain dates from html5 datepicker

Solution 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.

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

Solution 3:

HTML datepicker (<input type=date>) supports min/max attribute, but it is not widely supported.

At the meantime you may consider using bootstrap-datepicker, v1.2.0 is on github.

References:

W3C spec

Solution 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