You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Our application needs a picker that can select a date without a year, e.g. for selecting annual holidays.
We've been able to co-opt the VDatePicker to do this using the following steps:
set min and max dates of 2024-01-01 & 2024-12-31 (2024 as it is a leap year)
strip the year from the returned date
set the weekday-format prop to null to remove the weekday names from the picker.
set the first-day-of-week prop dynamically so that the first day of each month is chosen (moving the first to the top left for each month)
set the header-date-format prop to only show the month's name but strip the year
Unfortunately, this doesn't work with Vuetify 3 anymore as neither the first-day-of-week prop nor the header-date-format prop is available. With steps 1 - 3 still working, it is usable but makes for a confusing UI as the user clearly sees the year 2024 while expecting to select a date without a year.
Another drawback with Vuetify 3 is that the picker opens on the current month whereas before it opened on the month of the min-date, which means users will have to manually move into the correct year.
Proposed solution
I would love to have either a dedicated picker for calendar days without years, or a prop/mode in VDatePicker that configures it for that use-case. Alternatively, reintroducing the props first-day-of-week & header-date-format would allow me to co-opt the VDatePicker again, although this still feels like a dirty hack.
The text was updated successfully, but these errors were encountered:
Problem to solve
Our application needs a picker that can select a date without a year, e.g. for selecting annual holidays.
We've been able to co-opt the VDatePicker to do this using the following steps:
Unfortunately, this doesn't work with Vuetify 3 anymore as neither the first-day-of-week prop nor the header-date-format prop is available. With steps 1 - 3 still working, it is usable but makes for a confusing UI as the user clearly sees the year 2024 while expecting to select a date without a year.
Another drawback with Vuetify 3 is that the picker opens on the current month whereas before it opened on the month of the min-date, which means users will have to manually move into the correct year.
Proposed solution
I would love to have either a dedicated picker for calendar days without years, or a prop/mode in VDatePicker that configures it for that use-case. Alternatively, reintroducing the props first-day-of-week & header-date-format would allow me to co-opt the VDatePicker again, although this still feels like a dirty hack.
The text was updated successfully, but these errors were encountered: