HTML：输入类型日期和月份范围

Question

I'm trying to make an HTML form with input type="date" which will be a range of months but not years. For example I need the user to select a date with a range from March to October, but with all available years (2019, 2020, 2021...).

I know about option of attributes min and max but we must fill the entire specific date and I only need a range of months.

CODE of min and max :

<input type="date" min="2019-03-01" max="2019-10-31">

Is there any option to do this with clear HTML or must we use JavaScript?

Answer 1

Unfortunately, there is no way to eliminate the 'year' portion of the HTML date input, which makes some sense given that it has such wildly different implementations on different platforms.

JS will let you build what you want, but it will be more difficult to ensure cross-platform reliability. Here's one option, you can use a date input but restrict it and then strip the response with JS, though that does not actually hide the option to change the year.

How to hide the year part in Html <input type="date"> calendar panel?

Here's a similar SO answer that could lead you down a path to manipulate jquery's datepicker to do what you want:

https://stackoverflow.com/a/10243049/1650488

Ultimately, there are a lot of benefits with sticking to the native HTML elements instead of rolling your own solution, so personally I'd look at the workflow and try to make it make sense with the native datepicker.

If the native element really doesn't work, It might make sense to build your own input such as selecting the date and month range separately, but then you could run in to troubles with differing lengths of months and it will be hard to manage accessibility devices such as screen readers.