Vuetify: [Feature Request] Date pickers - Allowed dates optimization

Created on 11 Jan 2018  路  1Comment  路  Source: vuetifyjs/vuetify

New Functionality

There is a need to fully restrict user input in datepicker to a range specified in props.

Currently there is a way to set allowed dates for the picker, as per
https://vuetifyjs.com/components/pickers#example-6
however, this works only for days select, year and month selects are not affected.

Steps to reproduce:

  1. open https://codepen.io/pen/?&editors=101
  2. select "object" option. following app's logic only dates between today and today -5 should be selectable
  3. try to select any date outside allowed range, e.g. in 2016
  4. see that year and month for that date are selectable, and days are not

It would be nice to:

  • limit years visible/scrollable in year picker, or disable years that are out of range
  • in monthpicker, disable months that are out of range

Improvements

I am not aware of any work-around for this case, except for explicitly informing the user about restricted dates range before he reaches the datepicker via some text field, or in worst scenario via validation error. Making year/month selects restrictable will significantly improve UX of the datepicker component.

Bugs or Edge Cases it Helps Avoid

Currently user is able to select year and month that are out of the allowed range, making 2 steps out of 3 possible before "hitting the wall". Then he has to go back and select a value once again. This can cause some frustration on user's end.

Most helpful comment

The format of the min/max prop is not in the docs. It is YYYY-MM-DD

>All comments

The format of the min/max prop is not in the docs. It is YYYY-MM-DD

Was this page helpful?
0 / 5 - 0 ratings