2

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?

trevorp
  • 1,161
  • 1
  • 14
  • 19
Gamenext Tv
  • 33
  • 5
  • I think you are looking for datepicker. check https://jqueryui.com/datepicker/ – Praveen Gopal Oct 30 '19 at 20:31
  • @PraveenGopal I don't think `.datepicker()` helps with this question because `.datepicker()` still allows the user to change the year. – Ryan Oct 30 '19 at 20:48
  • Possible duplicate of [How to hide the year part in Html calendar panel?](https://stackoverflow.com/questions/48680414/how-to-hide-the-year-part-in-html-input-type-date-calendar-panel) – A. Meshu Oct 30 '19 at 20:48
  • 1
    @A.Meshu That answer restricts input but does not remove the option of choosing a year. And doesn't work well at all on my system... I don't think there's a way of doing what this question is asking; he'll have to go down the JS route. – Ryan Oct 30 '19 at 20:52
  • 1
    @Ryan after reading this again i completely agree. – A. Meshu Oct 30 '19 at 20:55

1 Answers1

2

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.

Ryan
  • 1,032
  • 1
  • 10
  • 23