Angular 2 + Ionic 2: how to change the date format in controller?

Question

I'm getting date in loop from sqlite database. The format is like "Wed Feb 01 2017 21:54:24 GMT-0200". But I want to change it as 'dd/MM/yyyy'.

How can I change format in the controller?

Example my code:

this.issuedService.fetchAll().then(( res ) => {
    var data = [];
    for (let entry  of <Array<any>>res) {                
        console.log( JSON.stringify( entry  ) );
    }            
    //this.items = <Array<any>>res;
}, ( error ) => {
    console.log( "ERROR: ", error.message );
});

UPDATE 2017-02-02

So, after a few hours without sleep, I finally found a solution.

I can add MomentJs libraries to my Ionic v2 project from NPM.

$ npm install moment --save

The result code:

import { Component } from '@angular/core';

import { NavController, NavParams } from 'ionic-angular';

import * as moment from 'moment';
import 'moment/locale/pt-br';

import { IssuedService } from '../../providers/issued-service';

@Component( {
    selector: 'page-home',
    templateUrl: 'home.html'
})

export class HomePage {
    items: any[] = [];
    issuedPage = IssuedPage;

    constructor(
        public navCtrl: NavController,
        public navParams: NavParams,
        public issuedService: IssuedService
    ) {
        this.initializeItems();
    }

    ionViewDidLoad() {
        console.log( 'ionViewDidLoad HomePage' );
    }

    initializeItems() {
        this.issuedService.fetchAll().then(( res ) => {
            for ( let entry of <Array<any>>res ) {
                entry.query_dt = moment( entry.picking_dt ).format( 'DD MMMM YYYY' );
                this.items.push(entry);
            }
            console.log( JSON.stringify( this.items  ) );
        }, ( error ) => {
            console.log( "ERROR: ", error.message );
        });
    }
}

Ionic 2 Doc / Adding third party libs

Here's another good answer https://stackoverflow.com/a/41282812/6294371 about how to format date in controller — Chen Dachao, Nov 07 '17 at 07:26

score 2 · Answer 1 · answered Apr 08 '17 at 22:33

2

I did it with two lines:

import { DatePipe } from '@angular/common';

<ion-label>{{myDate | date: 'yyyy'}}</ion-label>

the first is just the import in ts file and the second you put in your html file.

answered Apr 08 '17 at 22:33

bandojulio

129
2
5

1

Worked like a charm, much better solution. – nacho_dh Jul 30 '17 at 21:53

score 1 · Accepted Answer · answered Feb 02 '17 at 14:31

The solution to my project:

Adding third party libs

You can add most third party libraries to your V2 project from NPM. For example let’s add MomentJs.

 $ npm install moment --save

From here, we can import it into what ever class we want to use it in.

import {Page} from 'ionic-angular';
import * as moment from 'moment';

export class MyClass {
  constructor(){
    moment("20111031", "YYYYMMDD").fromNow();
  }

}

Ionic Documentation Code

score 0 · Answer 3 · answered Feb 02 '17 at 05:55

0

Try this

$scope.date = 'Wed Feb 01 2017 21:54:24 GMT-0200';
  var filterdatetime = $filter('date')( $scope.date,'dd/MM/yyyy' );
  alert(filterdatetime);

answered Feb 02 '17 at 05:55

developer

76
1
12

1

Op is looking for Ionic 2.. This looks like angular 1/ionic 1 – Suraj Rao Feb 02 '17 at 06:45
1

Sorry my mistake. But angular 1 element didn't support angular 2 ? @suraj – developer Feb 02 '17 at 07:43
1

no.. angular 2 is completely different from angular 1 – Suraj Rao Feb 02 '17 at 08:06

Angular 2 + Ionic 2: how to change the date format in controller?

3 Answers3