如何禁用html5 datepicker上的仅选定日期？

Question

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?

Answer 1

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.