feat(datetime): add header text to multiple selection; improve header consistency between modes

[amandaejohnston]

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?

• When multiple="true" and the header is enabled (e.g. when showDefaultTitle="true"), the part of the datetime's header that shows what date you have selected (hereafter referred to as just "the header") is not rendered.
• The header doesn't render in ios mode at all, whether multiple is enabled or not.

Issue URL: resolves #25668

md mode	ios mode

What is the new behavior?

• The header now shows if multiple="true". If 0 or more than 1 dates are selected, the header shows the number, rather than the exact selected dates. (The behavior when exactly 1 date is selected is unchanged.)
• Added a new prop titleSelectedDatesFormatter which can be used to customize the display of the header for localization purposes.
  • Note that this function is not called when exactly 1 date is selected, since that part is already localized automatically. Otherwise, devs would need to replicate the existing localization in their callback to handle this case.
• The selected date(s) will also now show in the header in ios mode. The text is identical between the two modes in all cases.
  • This also applies to single-selection datetimes.

md mode	ios mode

Does this introduce a breaking change?

• Yes
• No

Other information

[amandaejohnston]

This styling was fairly arbitrary on my part, since we don't have anything existing to go on as far as native comparisons go. I just re-used the same font size and picked a margin that looked good with the existing design.

[sean-perkins]

Since this feature changes the behavior of single selection datetime, should we also have similar checks as the multiple tests, to verify that text is rendering correctly (outside of screenshot tests)?

[amandaejohnston]

Since this feature changes the behavior of single selection datetime, should we also have similar checks as the multiple tests, to verify that text is rendering correctly (outside of screenshot tests)?

I would say the screenshot tests cover that, since the header text can only show the one selected date -- unlike when multiple="true", where there are a few different cases to account for. I could be convinced otherwise though.

[sean-perkins]

Great work on this! I'm good with or without the rename of the prop.

[liamdebeasi]

Is integrating datetime-button with these changes part of this work, or would you recommend we do separate design work for that?

[amandaejohnston]

I figure updating datetime-button is a separate task.

[liamdebeasi]

Great job! The property name is a bit wordy, but I also can't think of a shorter name that is still descriptive.