ion-datetime: How to get date value without timestamp?

Question

I'm using ion-datetime in ionic4 using NgModel to bind to a property, however, no matter what options I include in format, I always get the time with the timestamp included. ¿How can I remove timestamp from result so the final value of my property is something like "2019-04-22" instead of "2019-04-22T08:45:41.243-05:00"?

I tried: but, I'm still getting the timestamp

 <ion-datetime max="2030" min="2019" [(ngModel)]="mydate" display-format="MMM DD, YYYY"></ion-datetime>

I expect the result to be like: "2019-04-22", but I keep getting: "2019-04-22T08:45:41.243-05:00"

Answer 1

If you want only date then I think split() method might works,beacause value we get from ion-datetime is a string.So we use split method which split string and convert it to an array,and you can get date or time which thing you want with the help of index as follow:

     var dateFormat = mydate.split('T')[0]; 
     console.log(dateFormat);
     // 2019-04-22

Answer 2

You can format the date with Moment.js.

<ion-datetime displayFormat="MMM DD, YYYY" max="2030" min="2019" [(ngModel)]="mydate" (ionChange)="doSomething(this.mydate)"></ion-datetime>

import * as moment from 'moment';

doSomething(date) {
   console.log('date', moment(date).format('YYYY-MM-DD')); // 2019-04-22
}

Answer 3

You can use custom picker options to set custom buttons, it returns an object with all the variables in separate keys, so it makes it easier to edit the way you want it to display

To do so, you would insert this in your ion-datetime

[pickerOptions]="customPickerOptions"

and in your .ts file

this.customPickerOptions = {
            buttons: [
                {
                    text: 'Save',
                    handler: (time) => {
                        console.log('time', time);
                    }
                },
                {
                    text: 'Cancel',
                    handler: e => {
                        modalCtrl.dismiss(e)
                    }
                }
            ]
        }

Hope this helps

Answer 4

You can use moment.js

in your file.page.html

    <ion-datetime [(ngModel)]="mydate" placeholder=""></ion-datetime>

in your file.page.ts

import moment from 'moment';

<!-- to pass data to your API -->
mydate = moment(mydate).format('YYYY-MM-DD');

<!-- to view in console -->
yourFunction(mydate) {
    console.log('date', moment(mydate).format('YYYY-MM-DD'));
}

May this answer helps. I understand how frustrating it can be to find the answer we are looking for.