Clearing selected value on ion-datetime

[yivi]

Trying to use a simple date picker:

But I need the value to be able to be cleared, so it goes back to its initial state (showing no date at all).

Setting the bound value to an empty string or undefined both do nothing, the display does not change (although I do get a warning about an empty string not being a valid ISO 8601 string).

Using `show-clear-button=“true” I do get a “clear” button, but when the date is “cleared”, the “target-date” slot actually shows today’s date.

Is there really no easy way to reset the control, so there is no selected date shown, even if the underlying value is actually cleared?

I’ve managed to get nearer to the objective by overriding date-target:

<ion-datetime-button datetime="datetime">
      <span slot="date-target" :class="{hidden: dateTargetEcho === ''}">{{dateTargetEcho}}</span>
</ion-datetime-button>

dateTargetEcho has an empty string when there is no selected date, but there is still an ugly empty button floating there:

Displaying the span conditionally doesn’t work, because if my override is not there, then the one from the component is used.

<ion-datetime-button datetime="datetime">
      <span slot="date-target" v-if="dateTargetEcho !== ''">{{dateTargetEcho}}</span>
</ion-datetime-button>

[twestrick]

Can you provide a reproduction of this on StackBlitz? Curious how you are setting the initial state of showing no date at all in the first place before any user interaction is made.

I played around with it a little bit from a doc example and as you found, using the clear button does clear the value (wired up with v-model) but the button shows today’s date which aligns with the docs:

Resets the internal state of the datetime but does not update the value. Passing a valid ISO-8601 string will reset the state of the component to the provided date. If no value is provided, the internal state will be reset to the clamped value of the min, max and today. (source)

This doesn’t seem to be possible with the built-in Ionic ion-datetime-button. You should be able to roll your own button with the date picker though. You can customize the buttons so clear could be custom logic. In conjunction with the the ion-datetime events, you should be able to keep track of whether or not the user has set a date or not and if not, display “No date” or something similar in your button text.

[yivi]

Thanks.

I’ll try to setup a stack blitz, but the initial value is simply an empty string. There is nothing special about the setup, is mostly a copy of the docs; the only interesting/problematic part is the “how to avoid displaying any date when clearing the value of the bound to the datetime component”).

On startup, then component shows no date. Once a date is selected, no clearing is possible that ends up in showing no date again.

I need to clear the value, and show the user that the value has actually been cleared, so they need to pick a new value in its place.