Clear ion-datetime

Ionic Framework ionic-v3
1

The android date time picker has the ability to “clear” the date value which essentially sets it to null.

Is there anyway to add a “clear” button to the element?

An example of this need is to enter a date for when a product sells. If a user enters a date mistakenly before the product has actually sold, they then need to clear the value.

Thanks

2

Alternatively you can set a default value of the <ion-datetime>, and use the angular functions aka “hasvaluechanged” to see if the value needs another check. (using classes like touched, dirty for example).

3

pickerOptions will be fixed with PR #13202, so this is the best way to implement a “Clear” button:

<ion-datetime
  formControlName="myDate"
  [pickerOptions]="customOptions">
</ion-datetime>

  public customOptions: any = {
    buttons: [{
      text: 'Clear',
      handler: () => this.myForm.controls['myDate'].setValue(null)
    }]
5 Likes
4

this shows the clear button as it should but the handler no longer fires when it is clicked

~edit

it does work fine, just need to make sure your using ionic-angular 3.9.1 or greater

5

it’s the official way to clear database, please stop saying it’s the core’s fault. It’s in 99% user’s fault.

6

Hi.
I’m using :

@ionic/app-scripts : 3.1.5
    Cordova Platforms  : none
    Ionic Framework    : ionic-angular 3.6.0

I’ve added a custom button to a ionic-datetime

  <ion-datetime displayFormat="MM/DD/YYYY" [(ngModel)]="search.DateFrom" name="DateFrom" [pickerOptions]="customPickerOptionFrom"></ion-datetime>

and ts

customPickerOptionFrom = {
    buttons: [{
      text: 'Clear',
      handler: () =>
        console.log("OnClearDatetime")

    }]
  }

but clear event it’s not fired.
How I can resolve ?

1 Like
7

here is a way to do it
https://forum.ionicframework.com/t/ion-datetime-clear-pickeroptions-buttons/118289/2