feat: Support optional datetime

[NorthNick]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already include this feature request, without success.

Describe the Feature Request

It would be good if Ionic 7 supported an optional datetime field with an associated datetime button. Such a field would indicate on the button when it is null (currently the button disappears in this case) and would allow a non-null value to be changed to null with a standard button in the datetime modal form. ("null" here includes undefined and empty string.)

Describe the Use Case

I have a number of cases where users enter a date range with a start and end date, where leaving the date empty indicates that the range has no start or end date. Currently implementing this with a datetime button requires either an extra tickbox to mean "no date" or extra code to show another button when the datetime vanishes because the datetime is empty, a customised datetime modal with an extra "clear the value" button, and program logic to coordinate everything.

Describe Preferred Solution

My preference is as follows. Specific property and function names are just suggestions.

1. Add an extra optional boolean property on ion-datetime, defaulting to false. When it is false, behaviour is exactly as it is now.
2. When opening a datetime display that would currently show the standard Cancel and Done buttons, an extra Clear button is added when optional is true. Clicking it sets the value to null (or undefined or empty string, whichever is most consistent with general practice).
3. Add a new clear function on the DateTime component class, similar to cancel and confirm, which clears the value and optionally closes any associated popover/modal. This allows the user to access the functionality on custom modal buttons.
4. Maybe prevent Datetime from throwing an error when optional is true and the value is null/undefined/empty string.
5. Add a new emptyText property on ion-datetime-button defaulting to something like None, which is displayed when the button is associated with an ion-datetime where optional is true, and the value is null/undefined/empty string. Clicking the button when the value is null opens the datetime in the usual way.
6. There might be a case for a defaultValue property on ion-datetime, determining the particular month/year/whatever to be shown when opening a datetime whose value is null.

Describe Alternatives

No response

Related Code

No response

Additional Information

No response

[ionitron-bot[bot]]

Thanks for the issue! This issue has been labeled as holiday triage. With the winter holidays quickly approaching, much of the Ionic Team will soon be taking time off. During this time, issue triaging and PR review will be delayed until the team begins to return. After this period, we will work to ensure that all new issues are properly triaged and that new PRs are reviewed. In the meantime, please read our Winter Holiday Triage Guide for information on how to ensure that your issue is triaged correctly. Thank you!

[liamdebeasi]

Thanks for the report. Do you have any examples of existing mobile apps that implement this pattern?

[NorthNick]

Interesting question - mine does, but that's bespoke for a single client. I don't see it around in other apps: they tend to have a couple of radio buttons, one for "No date" and the other that activates a calendar control. But this takes a disproportionate amount of screen space, especially if you are specifying a date range with optional start and end dates. The ion-datetime-button gives the opportunity to improve that interface by showing "None" when no date is chosen, and the actual date when one is chosen, so allowing an optional date control to have the same visual impact as any other.

[liamdebeasi]

Have you tried using a checkbox to reduce the amount of screen space used? When checked, the datetime would show and be required. When unchecked, the datetime would hide. You could have it show/hide ion-datetime-button to further cut down on screen space used.

Here is a demo: https://codepen.io/liamdebeasi/pen/gOErOJa

[ionitron-bot[bot]]

Thanks for the issue! This issue is being closed due to the lack of a reply. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

Thank you for using Ionic!