Enhancement: add month-year and year appearance to calcite date picker

[fendiaoxiaoshuazi]

Description

Support month-year and year only appearance in the calcite date picker.

Here are the screenshots of the month-year and year only appearance in bootstrap date picker

Acceptance Criteria

Relevant Info

Blocked issues: #9167, #8624, #10291, #10243, #10490

Which Component

calcite-date-picker

Example Use Case

[fendiaoxiaoshuazi]

Hi calcite team, I am a PE of the Survey123 team, and we are currently working on replacing our date and time picker with the calcite date and time picker for better A11y and I18N support. The month/year and year only appearance is critical for us, so we cannot fulfill the replacement at this point.

Do you have a timeframe time for this enhancement to be implemented?

[fendiaoxiaoshuazi]

Hi Calcite team, we have partially replaced our pervious Wijimo date/time picker with the Calcite date/time picker. Since Calcite does not support month year and year only appearances, we have to keep the Wijimo date picker to support these appearances.

Therefore, we need to load 2 different libs for the date/time question, and there are many month year and year only appearances I18N issues are impeded by the replacement work.

We are waiting for Calcite to support month year and year only appearances to proceed with the replacement work. Do you have a timeframe time for this enhancement to be implemented?

[fendiaoxiaoshuazi]

Hi Calcite team, we need to upgrade node.js to the latest version as required by the Security team, and we probably have to drop the Wijimo lib which we currently use for month-year and year-only appearances.

Therefore, Calcite's month-year and year-only appearances support become the pre-requisite of our node upgrade. We plan to upgrade node.js and drop Wijimo in our UC Release. If possible could you please prioritize this issue, and address this issue before May?

[benelan]

Hi @fendiaoxiaoshuazi, sorry for the delay! I'll make sure to bring it up again during our next triage. It is definitely a valid use case and something we would like to implement. However it is unlikely to be done by May, since it would require design and i18n feedback before development can start.

Which Node version are you currently on? If you're on an Active or Maintenance LTS version, updating to the latest minor/patch version should be sufficient security-wise. That should give us more time until your current date components need to be replaced.

https://nodejs.org/en/blog/vulnerability/february-2023-security-releases/

We are also revamping some of our processes so we can better communicate our plans and progress. Our original triage was scaled down during the lead up to v1, but we are starting to work through the back-fill. Thanks for the patience everyone!

[yixi8524]

@benelan Thanks for your prompt reply. We are still in Node.js 14 & NPM6 env. We must plan the next release to upgrade our Env and libs. Not only Node.js also include NPM, Webpack, Angular Framework, etc. So this is a good time to refactor our lib. If we can retire the Wijimo ASAP, it can let us easy to control the i18n and the A11Y support. Give the same and better UX experience to our users.

[SkyeSeitz]

Howdy folks! Can I get some eyes on this proposed design ? Looking for feedback before moving any further. Thanks!
@macandcheese @jcfranco

[anveshmekala]

Attaching wiki notes for reference.

cc @jcfranco @geospatialem @SkyeSeitz

[github-actions]

Installed and assigned for verification.

[DitwanP]

The original ask of this issue has been broken off into these new issues:
#9394
#9393

And this issue was repurposed to add the following enhancements to date-picker:

Changes

• display two calendars for range irrespective of layout.
• No longer switches focus from day to end input when startDate is selected initially.
• Month selection is possible via select menu
• No longer positions the date-picker component relative to endInput when endInput is focused in range.
• Dates from previous months are not visible in range calendar.
• Divider indicator icons are removed in horizontal layout for range in input-date-picker.
• No longer uses chevron icon which indicate the open status of input-date-picker in startInput field.

🍡 Verified locally on dev