CODEWITHSUNDEEP
javascriptjqueryhtmldatepicker
Van Dyke
Van Dyke

Reputation: 64

How can I disable only selected dates on html5 datepicker?

How can I disable few dates (Ex: one week) on a HTML datepicker? I have an input item like this

<input type="date" id="date01" name="date01" max="2019-12-30">

I know I can use min and max values to limit available time period, but in here, I want to block out some days in the middle. can I do that with plain html date picker? if so, how?

Upvotes: 1

Views: 1132

Answers (1)

Terry
Terry

Reputation: 66228

You can't: the HTML5 date input only accepts a lower and upper bound to indicate the allowed date range: you cannot specifically select certain dates that are disabled/non-selectable to the user.

There are two solutions to your approach:

  • Use a combination of client- and server-side validation to let the user know that certain dates are not allowed. This comes at the cost that the user does not know which dates are not allowed when the native date picker is shown in the browser.
  • Alternatively, you can use a third-party library that allows disabling of specific dates.

Upvotes: 1

Related Questions