feat(datetime): add preferWheel support for date presentation

[liamdebeasi]

Note: Playground docs will be done in a separate PR once all functionality is complete.

Pull request checklist

Please check if your PR fulfills the following requirements:

• Tests for the changes have been added (for bug fixes / features)
• Docs have been reviewed and added / updated if needed (for bug fixes / features)
  • Some docs updates need to be made in the ionic-docs repo, in a separate PR. See the contributing guide for details.
• Build (npm run build) was run locally and any changes were pushed
• Lint (npm run lint) has passed locally and any fixes were made for failures

Pull request type

Please check the type of change your PR introduces:

• Bugfix
• Feature
• Code style update (formatting, renaming)
• Refactoring (no functional changes, no api changes)
• Build related changes
• Documentation content changes
• Other (please describe):

What is the current behavior?

Issue URL: Part of #23981

What is the new behavior?

• Add support for the wheel style when presentation="date". Intended behavior can be found on the design doc for this feature.

Does this introduce a breaking change?

• Yes
• No

Other information

[liamdebeasi]

Outstanding question: Say you have August 31st selected. You then change the month to June, which only has 30 days. What should happen to your previous "31st" selection? Currently, it resets you to the 1st, but not sure that's the correct behavior here. Maybe it should reset you to the nearest item?

[sean-perkins]

Ran locally and the primary behavior looks great, nice job!

Is this layout shifting something we need to address?

Kapture.2022-06-08.at.13.41.52.mp4

I believe it is happening because the max range (October) doesn't render double digits for the days column, so the width is different when changing between the available months.

[liamdebeasi]

Setting a minimum width on the picker column fixes the issue. I have it applied only to ion-datetime, but maybe it would be good to set this on the picker column component?

[sean-perkins]

I think it makes sense in the ion-datetime stylesheet with the selector you used. Putting that style within ion-picker-column-internal could be potentially confusing, especially if that component becomes the public API for developers. The min-width is more of a side effect of the dynamic nature of the data we are rendering for the date picker.

[averyjohnston]

Outstanding question: Say you have August 31st selected. You then change the month to June, which only has 30 days. What should happen to your previous "31st" selection? Currently, it resets you to the 1st, but not sure that's the correct behavior here. Maybe it should reset you to the nearest item?

I think resetting to the nearest item would feel better -- if you're on the 31st, you probably intend to pick something late in the month anyway -- although I recall there being issues when we tried to implement that in the context of interactions with min/max. 🤔

[liamdebeasi]

Makes sense. I'll keep the behavior for now and do some more investigation next sprint.