Does datepicker supports partial date formats?

[GuptSmita]

Hello Bryan and team, I am wondering if this accessible datepicker supports partial date formats like "MM/YYYY". I tried to provide this date format as input but it didn't work. Can you please provide more information/example if its being supported. Thank you!

[accdc]

Hi, it does not at present. When the datepicker opens, it has to have a day selected to initiate with a specific date, including day, month, and year. It's possible I can add this though. What do you expect to happen if only the month and year are specified?

[GuptSmita]

Hello, thanks for the reply. Yes we are using this datepicker and wondering if we can have this partial date option for the end users so that they can enter only month and year for some specific date fields like month of joining, travel duration etc (where exact date is not required). Possible formats would be "mm/yyyy", "mm/yy", "yyyy/mm" or "yy/mm". Let me know please if you need more information, Thanks a lot

[accdc]

Thanks for explaining. When the calendar opens with a specified month and year, day 1 will automatically be selected for that month. All other dates will also be displayed as normal. Is that what you expect to see when the calendar opens like this?

[GuptSmita]

I am looking for something like this. so that there will be no date option, just month and year. By default, when calendar opens, it can show the current year and month with no date table. I just want to have short dates with above mentioned formats. Let me know please if more information is needed. Thank you

[accdc]

Thanks, I am totally blind however, so I'll need you to describe exactly what it is that the attached image shows.

[GuptSmita]

Hello, Sure, I will describe it here- When a datepicker opens, it should only have two dropdowns, one for month and one for year. It should not contain any week or date cells. So for example- lets refer to this accessible datepicker, for partial/short dates, it should only have rows which has "yearSelector" and "monthSelector" classes. It should not have "week" and "day" classes. Please let me know if needs more information, Thanks a lot

[accdc]

Thanks, that helps a lot. :)

I will work on getting this added, though I can't say how soon this will be. I'll send word when I know more.

All the best, Bryan

[GuptSmita]

Thanks to you too, please feel free to let me know if you have any further question, and also Keep me posted once you know its expected delivery date, so that we can manage our things accordingly. Really appreciated it 🙏

[accdc]

No problem, I plan to have it done within the next couple of weeks. If I can find some extra time between projects then it will be sooner. I'll keep you posted.

[accdc]

Hi, I have pushed an update that I believe corrects the issue.

There is a new feature that you can enable by setting the property monthOnly to true within your datepicker config.

// Specify that only the year and month selector will be rendered, and no individual dates.
// Set inputDateFormat to return the correct string value when the datepicker closes. For example:
// inputDateFormat: 'MM/YYYY',
monthOnly: true,

Additionally you can enter any month/year or year/month date string into the input field and the datepicker will attempt to resolve the date.

Examples: 7/24 , 24/11 , 11/1979

I'll close the issue as fixed, but please test it and let me know if that is what you were looking for.

[GuptSmita]

great, thanks a lot, really appreciate it. I will pull new changes shortly, and let you know. Thanks again 🙏

[accdc]

FYI, I realized I forgot to add the date format string code that will return a 2 digit year, so I added that last night. This is a new token within the date format options: "yy", which will be populated by the 2 digit year.

You can set this using the inputDateFormat property like so.

inputDateFormat: 'MM/yy',

Or in whatever combination you wish.

All the best, Bryan

[GuptSmita]

Hello Bryan, I have started working on using short dates in datepicker, but i am having these issues- 1- line 389 - yy: ("0" + dc.range.current.year).slice(-2) in datepicker.js is breaking for short dates as well as regular/full dates(dd-mm-yyyy). For now, I have commented this line to make it work further. 2- Also, month dropdown is working fine with keyboard, but not with mouse. As soon as month dropdown opens using mouse click, it close the whole datepicker, so user is not able to select month using mouse.

When its possible for you, can you please confirm me if you are having same issues. Also, have you included this option/example in your documentation?

Thanks a lot, Smita

[accdc]

Hi, I've been away for a while so am just looking into this. Which example in the Templates folder best shows this behavior?

[GuptSmita]

Hi, thank you replying. Well I am using regular custom date formats, so that example might work. But I think this would be true for any regular datepicker., as the same file "4X/Modules/Datepicker.js" is being used across datepickers. Also, have you included a short date datepicker in your documentation yet?

Best regards, Smita

[accdc]

Hi, I apologize for the delay, I've been out due to health issues. I hope to be able to work on fixing this in the near future though. I'm going to reopen this issue so I have it at the top of my list.

[accdc]

In looking into this further, it looks like introducing the new functionality broke some needed functionality, so I restored the prior datepicker.js version temporarily.

I'll work on fixing these issues using a fresh start so it doesn't compound the problems.

[GuptSmita]

Hello Bryan, Thank you so much for looking into this.

[accdc]

Hi, I just pushed an update that I hope will address your prior needs and hopefully fix the additional bugs you mentioned.

There is a new Datepicker template that you can use to play with, which is also live at: https://whatsock.com/Templates/Datepickers/Basic%20Short/index.htm

You can see how it works within the repo download.

Please let me know if this is what you had in mind.

[GuptSmita]

Hello Bryan, Thanks for the updates and understanding my issues so well. Yes, this is same what I had in my mind.

Just one question, While playing with the template only, I noticed that i am not able to open "Month" datepicker from "Enter" key. As soon as I am pressing enter key, its closing the datepicker and selecting the month. Its opening on only Space keypress. However, the year dropdown is working prperly by opening on "enter" and "Space" key.

Do you think this behaviour is possible to be on month dropdown as well? So that it will open on first "Enter" keypress and select the month/close the datepicker on second "Enter" keypress.

Let me know please, Thanks a lot

[accdc]

Hi, unfortunately there isn't without having to change the UI by adding another button to the datepicker for saving the selected month, and that will take longer because I would have to redesign the table renderring layout within the script and that would impact all datepickers across the board.

As a compromise, I set the month to save on Enter instead of the year since it is more likely that somebody making a selection will want to save on a granular month selection rather than on a global year selection.

From an accessibility perspective, a native select element such as this is a common control type that non-sighted screen reader users have been using for many years and you can also press Alt+DownArrow (on Windows) to pop open the available months as well as the Spacebar.

If it's confusing to first set focus on the Month select instead of the Year select when it opens, I can change that fairly quickly if you wish to make the flow a bit more intuitive.

Otherwise, I'm not sure when I will have the time to redesign the table layout to add another control within it.

[accdc]

Hi, as an FYI, I did push an update late last week that changes the Year and Month selector to work in the same fashion from the keyboard to maintain consistency , plus focus will move to the Year field by default.

It's important to change the helpText property in the setup script to reflect the new instructions for use, which you can test in the live example. When you press F1 it will announce the keyboard instructions while using a screen reader.

[GuptSmita]

Thanks a lot Bryan. Really appreciate it. Yes, I noticed this behavior yesterday when demonstrating this to my team. Everything looks good now. I am going to pull new changes soon.

Best Regards,