feat: <IonDatetime> button position, or allow developers to control the datetime to require confirmation before triggering update

Prerequisites

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

Describe the Feature Request

I like how the date picker when buttons are shown, requires confirmation before triggering the update, which enables a user to interact with the calendar, but unless triggering confirm, no update will actually happen.

However, this requires buttons to be enabled or exist. And positioning the buttons above for example is pretty simple, those can be rendered independently from the Ion-datetime, but you either get updates always now that there are no buttons, or you can trick the ion-datetime to think there are buttons but it still renders the padding around an empty element, which visually looks wrong.

(I guess there is prolly a way to simply make it so that updates are ignored from the developer’s side, until some other trigger is made and interact directly with the instance of ion-datetime to do so.)

But I want to propose a request, would it make sense to adjust updating and controls to work like:

• If the ion-datetime is rendering its default buttons, then treat things they way they work today. Only emit updates on confirm.
• If the ion-datetime is rendering a slotted button, also treat it the same way today
• But, if the developer wants full control around updates, maybe provide a prop called requireConfirmation
  • if true, events are only emit on confirm
  • if false, events are always emit, regardless of buttons being rendered or not
  • if undefined, the current behavior is good.

So this moves the component to operate under some typical defaults as it does today, but allows developers the option to show buttons and trigger updates always (for whatever reason). Or, show no buttons, but updates are triggered by the developer manually using the imperative API.

Describe the Use Case

Use case is to allow a developer total control over the rendering of confirmation buttons for date picking, by separating the announcement of updates from the visibility of buttons as a result of some blend of configuration. Instead, providing an explicit control prop around when updates should be announced.

Describe Preferred Solution

Something maybe like:

<button onClick={() => { this.ionDatetime.confirm() }}>Confirm</button>
<IonDatetime ref={this.ionDatetime} requireConfirmation />

Describe Alternatives

No response

Related Code

No response

Additional Information

No response

[puopg]

Awesome, I can close this feature request then, as reading the value prop, basically allows me to build whatever version of this that I need. Thanks!

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. 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.