Ion-datetime clear / pickerOptions.buttons

Ionic Framework ionic-v3
1

Hi,

I try using pickerOptions of ion-datetime to create an additional clear button. Anyway only default buttons appear. Looking into datetime.js it seems like pickerOptions are handled as a string and not parsed correctly to an object. Could somebody have a look at the code and point me to what’s wrong there?

<ion-datetime displayFormat="DD.MM.YYYY" pickerFormat="DD MMM YYYY" monthShortNames="{{ 'DATE.MONTH_SHORT_NAMES' | translate }}" 
    [(ngModel)]="dateValue" pickerOptions="{ buttons: [
    {
      text: 'Clear',
      handler: (data: any) => {
        console.log('datetime, clear', data);
      }
    }] }" (ionChange)='onChange()'></ion-datetime>

https://plnkr.co/edit/c7J68cI6MzmY2f0h1XHU?p=preview

Additionaly two screenshots from debugging datetime.js.

pickerOptions1
pickerOptions1.png1228×270 21.7 KB

pickerOptions2
pickerOptions2.png661×501 26.1 KB

2

Hey,

Try adding brackets around the pickerOptions attribute, like this:

<ion-datetime displayFormat="DD.MM.YYYY" pickerFormat="DD MMM YYYY" monthShortNames="{{ 'DATE.MONTH_SHORT_NAMES' | translate }}" 
    [(ngModel)]="dateValue" [pickerOptions]="{ buttons: [
    {
      text: 'Clear',
      handler: (data: any) => {
        console.log('datetime, clear', data);
      }
    }] }" (ionChange)='onChange()'></ion-datetime>

See here

3

Hi,

i tried that already. It’s not working either.
For now I just changed the text of the cancel button to ‘Clear’ and handle event to clear the value. I don’t have a use case to show tree buttons at the moment, so it’s okay.

4

Here you can see suggestions :

https://github.com/ionic-team/ionic/issues/17482