Clear ion-datetime

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.


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).

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

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

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


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

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

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: () =>


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

1 Like

here is a way to do it