fix(datetime-button): render correct text when passing partial date values

[liamdebeasi]

Issue number: resolves #27797

---

What is the current behavior?

Datetime Button passes a parsed value to one of the many text formatting utilities we have, such as getMonthAndYear. However, developers can pass partial date values such as 2022 or 2022-04 (April 2022). According to https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date#date_time_string_format, these are still valid date strings.

However, the parseDate utility does not add fallback values. So passing 2022 will cause the day and month fields to be undefined. This means that getNormalizedDate passes '//2022' to the Date constructor.

Some browsers, such as Chrome, will automatically account for the stray slashes and still return a valid date. Other browsers, such as Safari, do not do this and will either return "Invalid Date" or throw an error.

What is the new behavior?

• Date normalizing utility now has fallback values so we always pass in a valid date. In the example above, getNormalizedDate will now pass '1/1/2022' instead of '//2022' to the Date constructor.
• Refactored other utils that use new Date to make use of getNormalizedDate since they are also impacted.

Note: I added an E2E test instead of a spec test because I want to test cross-browser behavior to ensure consistency.

Does this introduce a breaking change?

• Yes
• No

Other information

[bolt-new-by-stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[sean-perkins]

Should we fallback to the current year, instead of hardcoding 2023?

e.g.:

refParts.year ?? new Date().getFullYear()

[liamdebeasi]

We could, though we also default to 1/1/2023 here:

ionic-framework/core/src/components/datetime/utils/format.ts

Line 58 in 89ed213

year: 2023,

Any preference?

[averyrousseau]

I don't have a preference myself. Presumably, if I'm passing in a value without the year, I'm using the month presentation, in which case I don't care about the year since it'll never be displayed.

That said, if we do go with the current year, I would rather use the current date for the month and day as well for consistency's sake.

[liamdebeasi]

Presumably, if I'm passing in a value without the year, I'm using the month presentation, in which case I don't care about the year since it'll never be displayed.

Yep exactly this. If any of those values are undefined then they aren't actually used in the rendering of the component -- we just need them to get a valid date

[sean-perkins]

I'm ok with this as-is then 👍