Feat: DatePicker Month and Year quick select

[Adham-Mamedov]

Please list the related package(s)

checkout-ui-extension "@shopify/ui-extensions": "2024.4.x", "@shopify/ui-extensions-react": "2024.4.x"

If this related to specific APIs or components, please list them here

DatePicker and DateField components

Is your feature request related to a problem? Please describe.

I added a DatePicker for specifying date of birth. I don't want customers to enter it manually because I have several date formats allowed. It would be hard to validate. So I made input readonly and noticed that it is really exhausting to select a date that is far using date picker, because DatePicker can only step by 1 month. Specifying defaultYearMonth is now much helpful. I set default year to 2000. But still customers born in 1980s will need to spend 2 minutes to get to their year. I think that is bad UX and will make them skip the Date of Birth.

Describe the changes you are looking for

Would be great to add quick changing of year and month by clicking on year at the top of component, like it's done in https://mui.com/x/react-date-pickers/date-picker/ or many other ui libs

Describe alternatives you’ve considered

Allowing customers to enter date manually will resolve the issue but it is less UX friendly, and requires handling the validation manually.

Additional context

[jun-shop]

Thank you for the feedback. re: not wanting to let customers enter dob manually because of different date formats allowed, do you mind sharing what formats you use? would it be helpful if we exposed date validation utilities?

[Adham-Mamedov]

Currently I am using Moment.js formats. I am using validation provided by Moment, but it has issues with parsing invalid date. Especially with MMMM DD YYYY if user enters 11052000 it formats as January 11 0520. The merchant sets up the date format, so I used moment to format it and validate.