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.

Answer 5

1. install date-fns by npm i --save date-fns

2. import {format} from "date-fns"; in your .ts file

3. let date_x = "2019-11-30T14:42:30.951+08:00";

4. format(new Date(date_x), "yyyy-MM-dd"); you should get as result in console => '2019-11-29'

Answer 6

Edit2: toLocaleFormat is not widely accepted. Here is a post on alternatives. You could just split it around the T.

const dateArray = fullDateString.split('T');
if (dateArray.length > 0){
    const partYouWant = dateArray[0];
}

Edit: From the Ionic docs

It's also important to note that neither the displayFormat or pickerFormat can set the datetime value's output, which is the value that is set by the component's ngModel. The format's are merely for displaying the value as text and the picker's interface, but the datetime's value is always persisted as a valid ISO 8601 datetime string.

Here is a better answer:

const dateObject = new Date(this.mydate);
const dateString = dateObject.toLocaleFormat('%Y-%m-%d');

An input for new Date can be a date string defined as:

String value representing a date. The string should be in a format recognized by the Date.parse() method (IETF-compliant RFC 2822 timestamps and also a version of ISO8601).

---

I'm guessing you are trying to access this.mydate in your code.

You have several options, best represented by this stack overflow post.

this.mydate.toLocaleFormat('%Y-%m-%d');

This function will take a Date object and convert it to the string in the format you requested. All the options you can put in the options are here.

There are also plenty of other options shown in the stack overflow post above.