fix(datetime): add dev warnings when setting out of bounds value

[averyjohnston]

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?

Originally, assigning a value to ion-datetime that's sufficiently earlier than the min or later than the max would lead to a disabled month being displayed, and the user being unable to navigate in either direction. This was mostly resolved here #25351 since both assigning a value and leaving it to the default go through the processValue function. The dev experience just needs some polish.

Issue URL: #24881

What is the new behavior?

Console warnings for out-of-bounds values are now printed when either assigning an initial value, or updating it programmatically.

Does this introduce a breaking change?

• Yes
• No

Other information

Tests for console warnings have been flaky in the past, so I didn't include one. I did add a test to ensure an in-bounds month is displayed, though, since the existing tests only cover datetimes with no initial value.

[sean-perkins]

Tested locally and it does exactly what it needs to do. Great work 👍 I agree that adding tests for the contents of the warning message has been flaky and does not introduce value here.

~ Would there be any value to the developer if the warning message included the values back to them? For example:

[Ionic Warning]: The value (2021-05-01) passed to ion-datetime is earlier than the min (2021-06-01) or later than the max (2021-10).

or:

[Ionic Warning]: The value passed to ion-datetime is earlier than the min or later than the max. { min: "2021-06-01", value: "2021-05-01", max: "2021-06-30" }

[liamdebeasi]

Good to go once the comment below is addressed

[liamdebeasi]

Tested locally and it does exactly what it needs to do. Great work 👍 I agree that adding tests for the contents of the warning message has been flaky and does not introduce value here.

~ Would there be any value to the developer if the warning message included the values back to them? For example:

[Ionic Warning]: The value (2021-05-01) passed to ion-datetime is earlier than the min (2021-06-01) or later than the max (2021-10).

or:

[Ionic Warning]: The value passed to ion-datetime is earlier than the min or later than the max. { min: "2021-06-01", value: "2021-05-01", max: "2021-06-30" }

If it's not too hard, I think it would provide for a nice DX to have a more specific message.

Could do something like this:

[Ionic Warning]: The value provided to ion-datetime is out of bounds.

Max Date: 2021-04-25
Min Date: 2021-06-01
Value: 2021-03-01

At least for me, listing the values on separate lines makes the warning easy to scan.

[sean-perkins]

Agreed, I was thinking just use the second argument of console.warn to pass an object of the min, max and value.

[averyjohnston]

I like that multiline formatting 👀 I'll pull it into a separate util too.

[averyjohnston]

I went with logging the min/max/value as stringified objects, so we don't have to worry about date formatting across locales.