Ion-datetime format

Ionic Framework ionic-v3
1

hello, i’m using this ion-datetime amd i want to get date like 12/03/2018, any help please ?

2

Follow link
DatePipe https://angular.io/api/common/DatePipe

3

how to use it in the html file

<ion-datetime [(ngModel)]></ion-datetime>
4 
<ion-item>
  <ion-label>Date</ion-label>
  <ion-datetime displayFormat="MM/YYYY" pickerFormat="MMMM YYYY" [(ngModel)]="myDate"></ion-datetime>
</ion-item>
5

it doens’t work, already use it

<ion-item>
      <ion-label>From </ion-label>
      <ion-datetime pickerFormat="D/M/YYYY" [(ngModel)]="from_date" ></ion-datetime>
    </ion-item>
6

send your code both .html & .ts

7

html

  <ion-list>
    <ion-item>
      <ion-label>From </ion-label>
      <ion-datetime pickerFormat="D/M/YYYY" [(ngModel)]="from_date" ></ion-datetime>
    </ion-item>
    <!-- to -->
    
    <ion-item>
        <ion-label>To </ion-label>
        <ion-datetime displayFormat="D/M/YYYY" pickerFormat="D/M/YYYY" [(ngModel)]="to_date" ></ion-datetime>
    </ion-item>
  </ion-list>

and .ts, it where i want to get the date like on my question

8

share your ts file also

9 
 from_date:any
  to_date:any
  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }
10
11

can you format it please ?

12

click on given link they display in blue color .

13

let me try this. thanks

14

please mark as solution so easily identified by other

15

i get it like 2018-05-02
how to get it like Day/Mounth/Year

16

Use moment.js it will format for you the dates how you would like to customize it. And use this code to achieve that console.log(moment(date).format("DD/MM/YYYY")); Good to go :slight_smile:

1 Like
17

I agree with what @gbrigens says, but that doesn’t work, i’ll show my code:

HTML:

<ion-card>
        <ion-item>
            <ion-label>Sate date</ion-label>
            <ion-datetime displayFormat="MMM DD YYYY" [(ngModel)]="date" (ionChange)="parseDate()"></ion-datetime>
        </ion-item>
    </ion-card>
    <ion-card>

TS:

  date: string;

  constructor(public navCtrl: NavController) {
 
    var date_to_parse = new Date();
    var year = date_to_parse.getFullYear().toString();
    var month = (date_to_parse.getMonth() + 1).toString();
    var day = date_to_parse.getDate().toString();

    this.date = year + '/' +  month + '/' + day;

    this.parseDate();
  }

  parseDate(){ 
    var firstStape, secondStape;
    if (this.date.substring(5,6) === "0"){
        firstStape = this.date.substring(0,5);
        if (this.date.substring(8,9) === "0"){
            firstStape = firstStape + this.date.substring(6,8);
            secondStape = this.date.substring(9);
        }
        else{
            secondStape = this.date.substring(6);
        }
        this.date = firstStape + secondStape;
    }
     
    this.date = this.date.replace('-','/');
}

I hope this helps you

1 Like
18

I’m sorry, but this is crazy. You do not want to be doing all this brittle, ugly string manipulation at all, let alone on every single change event.

Ionic’s datetime picker deals in ISO8601 strings, which is a good thing. Simply let it do its job:

<ion-datetime [(ngModel)]="date">

date = new Date().toISOString();

All the formatting should be done away from the interaction with the date picker component, and the best way to do it is using date-fns, not moment, because it is lighter and deals directly with ISO8601 strings:

declare var require(mn: string): any;
let format = require("date-fns/format");
getDisplayDate(): string {
  return format(this.date, "D/MM/YYYY");
}
1 Like
19

Have you try to read Date Time Format? Do you understand what is displayFormat and pickerFormat? It’s better if you read the documentation for more info.

As for above, it should look like this

<ion-item>
  <ion-label>From</ion-label>
  <ion-datetime displayFormat="DD/MM/YYYY" pickerFormat="DD/MM/YYYY" [(ngModel)]="from_date" ></ion-datetime>
</ion-item>
20

change your display format: displayFormat=“MMM/DD/YYYY” you need SLASHES