Feature view for month/years selection

[carlafranca]

Hi,This is not an issue but more a new feature. Is ts possible to extend the plugin to add a new view for mont/years? I would like to be ble to click on month/Year and show a list of month/years for selection. Here is an exmaple. https://designsystem.digital.gov/components/date-picker/

Thanks

[accdc]

Hi, at present this is not possible using the current design. It's a good idea though. I'll add this to my feature list to implement in a future update of the datepicker module.

[impetoyt]

As carlafranca I think it would be a big improvment for the UX have the possiblity to choose the month and the year directly. Think about a form with a brithdate picker... the users in order to reach the 1980 shoulds click inside the picker 43 times the years selection.

[accdc]

Thanks, I understand. I'll look into that. :)

[carlafranca]

@impetoyt , that's exactly the reason I was looking for this enhancement. I tried to play a bit with the code but couldn't fully implement it.

[accdc]

Hi, I have added this feature to the Datepicker module. You can try it out here. https://whatsock.com/Templates/Datepickers/Basic/index.htm

The following options have been added to the config:

// Optionally convert the static year field into a year selector dropdown.
yearSelect: true,
yearSelectMin: 1900,
yearSelectMax: 2030,
// Optionally convert the static month field into a month selector dropdown.
monthSelect: true,

This is already in the Git repo so you can download it there. Simply change the styling as you wish.

[carlafranca]

Just a quick check, Do we have the accessibility for that too? Thank you so much for this feature/enhancement.

[accdc]

Yes of course, I tested it using JAWS and NVDA in Edge, Chrome, and Firefox. It is fully keyboard and screen reader accessible. I also tested it on iOS with Voiceover to verify full mobile device accessibility as well. As a blind user myself, I made sure it was fully accessible before releasing it. :)

[carlafranca]

OMG @accdc you are fantastic. Thank you so much for that.

[accdc]

No problem, glad to help. :) Please let me know if you need anything else added or fixed in the future.

[impetoyt]

I found two possible issue related to this new feature: in case you are using a disabled range date by default the years and moths selection are disabled in according with the range date provided but the same things not happens if you are using the select field for the years or the months.

1) picker initialize: For the year you can avoid this issue on the picker initialize by using these properies and put some condition:

yearSelectMin: "some condition"
yearSelectMax "some condition"

For the month instead you can't provide the same solution because you haven't these properies:

monthSelectMin
monthSelectMax

A solution for the month issue could be a property like this (think about February = 2, June = 6, September = 9):

monthSelect: [2, 6, 9]

in this way into the select month field will appear only February, June and September or could appear all months but are all disabled except February, June and September.

2) picker after initialize: There is no way to dinamically change yearSelectMin, yearSelectMax after the picker initialization. The same thing for the moths and for the months still needs a solution like a property in the 1) monthSelect: [2, 6, 9]. In other world it shoulds be implemented two methods like: dc.setMonthSelect([2, 6, 9]) and dc.setYearSelect(yearSelectMin, yearSelectMax)

[accdc]

Hi, I just pushed an update that will automatically filter the available years and months based on the disabled state of the calendar dates. This doesn't need to be configured but will happen automatically when you set a disabled date range or choose to block off specific months or years.