Ionic-framework: ionic-datetime does not support clearing the value set

[ryaa]

Bug Report

Ionic version:


[x] 4.x

Current behavior:

ionic-datetime does not support clearing the value once it is set

Expected behavior:

Allow clearing the datetime value set

Steps to reproduce:

Here is the ionic-datetime demo - see https://ionicframework.com/docs/api/datetime
It is not possible to clear/reset the value

Please see the issue for Ionic 3 https://github.com/ionic-team/ionic/issues/11961

[bkarv]

You can create custom picker option with your own options. Only thing you will have handle the save function and convert the date. See below which is assumes the date is a full datetime.

<ion-datetime [pickerOptions]="customPickerOptions" [(ngModel)]="value">
      </ion-datetime>

set below function your init.


 setCustomerPickerOptions(): void {
this.customPickerOptions = {
      buttons: [{
        text: 'Cancel',
        role:'cancel',
        handler: () => console.log('Clicked Save!')
      },{
        text: 'Clear',
        handler: () => {this.value = null}
      }, {
        text: 'Save',
        handler: (data) => {
          console.log('Data', data);      
            let year: string = data.year.text;
            let month: string = data.month.value < 10 ? '0' + data.month.value.toString(): data.month.value.toString();
            let day: string = data.day.text;
            let hour: string = data.hour.text;
            let minute: string = data.minute.text;
            this.value = year + '-' + month + '-' + day +'T' + hour + ':' + minute + ':00Z';

        }
      }]
}

[ciekawy]

Ideally I'd like to add a clear button to existing ones.

[ciekawy]

considering private methods it seems like currently there is no option to extend existing behavior with clear button...

[brandyscarney]

This is definitely something we can add via a role to the button. Will add it to our board, thanks!

[Et3rnal]

@bkarv

let month: string = data.month.value < 10 ? '0' + data.month.value.toString(): data.month.value.toString();

I had issue where month and day numbers get swaped if the day is single digit, I have a feeling this bit has something to do with that? unfournity I decided to remove my pickerOptions and implment clear in diffrent way.

If this is the case I think its a bug and it should be fix @brandyscarney

[SwenVogel]

Hi, we have the same issue and struggeling with clearing an ion-datetime value. Currently we are using extra buttons in the user interface. The suggestion from "ciekawy"

Ideally I'd like to add a clear button to existing ones."

seems like an good solution for me.

One more solution would be the addition of an "clearInput" property as in ion-input.
In this case two more attributes would make sense: "clearText" for the button label customization and "ionClear" for an clear event.

This seems to me like the most ionic streamlined solution.

[SwenVogel]

I would also like to add that the problem also exists in the ionic 5.x release.

[nickwinger]

+1

[John361]

+1 for a default ion-datetime with a clear button
I just think that it is ugly to redefine all buttons for just a clear button and not really normal for a framework (that I love :heart:)

[DouglasLapsley]

bkarv's solution worked for me, but definitely a +1 on adding this as a picker role.