ionic-framework: DateTime doesn't allow adding Picker buttons or Clearing Value

I’m trying to utilize the DateTime component, but need a way to allow the user to “clear” the field (i.e. remove the value). The DateTime API docs mention that you can pass in the pickerOptions, but when I try to pass in an array of buttons, I see that they’re overwritten with the default Done/Cancel butttons

You can see in datetime.ts that the buttons property is overwritten during instantiation, just after it was merged with the pickerOptions that were sent in.

Is there a suggested approach for removing the value from one of these DateTime controls?

About this issue

Original URL
State: closed
Created 8 years ago
Reactions: 3
Comments: 17 (6 by maintainers)

Commits related to this issue

fix(datetime): avoid adding cancel and done button repeatedly references #7333 — committed to ionic-team/ionic-framework by brandyscarney 7 years ago

Most upvoted comments

@Simpler1 The handler function was not being copied/called using our deepCopy. This change makes it so you can pass a handler function to the picker, for example:

<ion-datetime pickerFormat="YYYY-MM-DDThh:mm" [pickerOptions]="customOptions" [(ngModel)]="placeholderDate" placeholder="Select Date"></ion-datetime>

customOptions: any = {
  buttons: [{
    text: 'Save',
    handler: () => console.log('Clicked Save!')
  }, {
    text: 'Clear',
    handler: () => {
      this.placeholderDate = null;
    }
  }]
};

brandyscarney on Oct 23, 2017

@IshaqBhojaniGenetech Thank you! I pushed a fix for this and released a nightly:

npm install --save --save-exact ionic-angular@3.8.0-201711081800

We plan on releasing a 3.9.1 with this fix in. Please let me know if you are still experiencing problems, thanks!

brandyscarney on Nov 8, 2017

@IshaqBhojaniGenetech The PR that was merged to fix that issue will be in the 3.9.0 release: https://github.com/ionic-team/ionic/pull/13202

There is a nightly released here if you’d like to try it out sooner: 3.8.0-201711062059. It can be installed by running this command:

npm install --save --save-exact ionic-angular@nightly

brandyscarney on Nov 7, 2017

@brandyscarney Thanks. That’s exactly what I was looking for.

Simpler1 on Oct 23, 2017