CODEWITHSUNDEEP
javascriptangulartypescriptionic-frameworkionic4
RealBadCoder
RealBadCoder

Reputation: 351

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

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"

Upvotes: 15

Views: 33334

Answers (9)

Grant
Grant

Reputation: 6309

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>

example of date only picker

See the presentation property in the docs for more details.

Upvotes: 1

Gevorg Sahakyan
Gevorg Sahakyan

Reputation: 88

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

in Ts file data:any='';

Upvotes: 3

Manthan Machhi
Manthan Machhi

Reputation: 55

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

Upvotes: 0

codeBrain
codeBrain

Reputation: 1

  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'

Upvotes: 0

SITI NURFATIHAH MD NOH
SITI NURFATIHAH MD NOH

Reputation: 11

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.

Upvotes: 1

Eliran Assaraf
Eliran Assaraf

Reputation: 348

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

Upvotes: 2

Diesel
Diesel

Reputation: 5335

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.

Upvotes: 0

Reaper
Reaper

Reputation: 412

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

Upvotes: 11

Remi Sture
Remi Sture

Reputation: 12968

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
}

Upvotes: 4

Related Questions