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

<ion-datetime
     displayFormat="DD.MM.YYYY"
     presentation="date"
     [(ngModel)]="date"></ion-datetime>  
 <div>{{date.split('T')[0]}}</div>

in Ts file data:any='';

Answer 4

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 5

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 6

In Ionic 6 you just need the presentation property.

Set it to date and it will only render the date picker, without the time picker.

<ion-datetime presentation="date"></ion-datetime>

See the presentation property in the docs for more details.

Answer 7

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.

Answer 8

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 9

This is the best way to get the exactly time First Create the $event method like this

    changeTime(e) {
        this.sentTempTime = "";
        let hoursMinutes = e.split(':');
        this.sentTime = this.formatTime(hoursMinutes);
    }

after that create the formatTime() method like this

formatAMPM(date) {
    var hours = date[0].toString().split('T'); //22
    var minutes = date[1]; //11
    var ampm = hours[1] >= 12 ? 'pm' : 'am'; //22 >=12 yes == pm
    hours =  hours[1] >= 12 ? hours[1] - 12 : hours[1]; //22 >= 12 ? 22-12=10 
    var strTime = hours + ':' + minutes + ampm;
    return strTime;
  }

after that you can able to get the time like this 08:15pm