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"

Solution 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

Solution 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
}

Solution 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

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

View more solutions

Comments

[Diesel]

Can you be more specific about where you getting the timestamp? Can you show the code that produces it? I'm guessing it's in your typescript where you try to access mydate

[RealBadCoder]

i get in console: ".toLocaleFormat is not a function" probably <ion-datetime> does not return a date object

[Anand_5050]

TypeError: eventDay.toLocaleFormat is not a function

[Diesel]

Is it a Date object? What browser are you using?

[Diesel]

Edited my answer just to split the string to get the value you want and explaining why toLocaleFormat is not widely accepted.

[Boat]

ion-datetime has months 1-12, moment has months 0-11. Doesn't work.