DateTime doesn't allow adding Picker buttons or Clearing Value

[marpstar]

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?

[jgw96]

Hello, thanks for opening an issue with us! Would you be able to provide a plunker that demonstrates this issue? Thanks for using Ionic!

[marpstar]

See example here. http://plnkr.co/edit/Xm0yw3UpxAIi8NSEzyIV?p=preview

Note my home.html file where I'm trying to pass a pickerOptions object into the ion-datetime to add a "Clear" button to my DateTime.

[7freaks-otte]

The problem lies in line 479 of the datetime.ts where pickerOptions.buttons get overwritten by [Cancel, OK] (https://github.com/driftyco/ionic/blob/master/src/components/datetime/datetime.ts#L479)
The user pickerOptions.buttons provided by <ion-datetime [pickerOptions]="{buttons: [...]}"></ion-datetime shouldn't be overwritten. I guess it would be a 5min 2line-hack to set [OK, Cancel] before and let the buttons be overwritten. I would be really glad to see this implemented soon as I would need a "Clear-Button" too...

[mwager]

How is the status of this issue? I would like to use the pickerOptions.buttons option too (https://github.com/driftyco/ionic/blob/master/src/components/picker/picker-options.ts).

Also note that deepCopy would remove the handler functions anyway!

See https://github.com/driftyco/ionic/blob/master/src/components/datetime/datetime.ts#L485
and
https://github.com/driftyco/ionic/blob/master/src/components/datetime/datetime.ts#L488

[tmvnk]

Any news? Would like to have an clear value option to datetime

[DrMabuse23]

Hi we need only a var /* @type {?} / pickerOptions = Object.assign({}, this.pickerOptions);
then the handler still work!
ad this line please https://github.com/ionic-team/ionic/blob/master/src/components/datetime/datetime.ts#L502 here

[janpio]

(Psst, having Pull Requests already there makes it a lot easier to just merge this some time together with other stuff)

[brandyscarney]

Thanks for the issue! I am going to close this issue as the original issue has been fixed and you are able to pass buttons now. There is still an open issue with the handler function here: #11641

I have submitted a PR to fix that here: #13202

[Simpler1]

@brandyscarney How can an ion-datetime value be cleared with this change?

[brandyscarney]

@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;
    }
  }]
};

[Simpler1]

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

[ishaqbhojani]

@brandyscarney I'm new in Ionic 3 and a bit confused, My package.json dependencies looks like

"dependencies": {
    "@angular/common": "4.4.4",
    "@angular/compiler": "4.4.4",
    "@angular/compiler-cli": "4.4.4",
    "@angular/core": "4.4.4",
    "@angular/forms": "4.4.4",
    "@angular/http": "4.4.4",
    "@angular/platform-browser": "4.4.4",
    "@angular/platform-browser-dynamic": "4.4.4",
    "@ionic-native/barcode-scanner": "^4.3.2",
    "@ionic-native/core": "4.3.2",
    "@ionic-native/dialogs": "^4.3.3",
    "@ionic-native/splash-screen": "4.3.2",
    "@ionic-native/status-bar": "4.3.2",
    "@ionic/storage": "2.0.1",
    "angularfire2": "^4.0.0-rc.2",
    "cordova-android": "6.3.0",
    "cordova-ios": "4.5.3",
    "cordova-plugin-device": "^1.1.6",
    "cordova-plugin-dialogs": "^1.3.3",
    "cordova-plugin-ionic-webview": "^1.1.16",
    "cordova-plugin-splashscreen": "^4.0.3",
    "cordova-plugin-whitelist": "^1.3.2",
    "firebase": "^3.9.0",
    "ionic-angular": "^3.8.0",
    "ionic-plugin-keyboard": "^2.2.1",
    "ionicons": "3.0.0",
    "phonegap-plugin-barcodescanner": "^7.0.0",
    "rxjs": "5.4.3",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.18"
  },

ionic-angular@3.8.0 is the latest but my handler function not get called

customOptions: any = {
    buttons: [{
      text: 'Clear',
      handler: () => {
        console.log("I'm Working");
        this.filterDate = null;
      }
    }]
  };

<ion-datetime displayFormat="MMMM D, YYYY" [(ngModel)]="filterDate" min="2016" [max]="maxDate" [pickerOptions]="customOptions" placeholder="Select Date"></ion-datetime>

I don't think that I've got the recent changes you did. Please Help

[brandyscarney]

@IshaqBhojaniGenetech The PR that was merged to fix that issue will be in the 3.9.0 release: #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

[ishaqbhojani]

Thanks @brandyscarney that worked.
But when I open the date picker first time everything works as expected but on second time the done and cancel button repeats again and again in the row
Please Look at the screen shots

First Time :

Second Time :

Can you please look into this Issue.

[brandyscarney]

@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!

[garaitapas2]

Here is an another solution. Hope someone will get help from the solution:
<ion-item> <ion-label><ion-icon name="calendar" item-left></ion-icon></ion-label> <ion-datetime style="position: relative;left: -43px;" name="birthday" [(ngModel)]="birthday" type="date" placeholder="Date Of Birth" displayFormat="YYYY-MM-DD"></ion-datetime> <ion-label *ngIf="birthday!=''" (click)="birthday=''" style="position: relative;left: 109px;"><ion-icon name="close" item-right></ion-icon></ion-label> </ion-item>

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.