Need help in using date-fns with Ionic

Ionic Framework ionic-v3
1

Dear,

I am looking to move from momentjs to date-fns. Although I have been trying for couple of hours, I am not able to get the correct format, period, timelines, etc… I could not find date-fns official guide of much use. I will be glad if anyone can suggest a tutorial, a link, or examples on how they have used it on their specific page with HTML and TS samples.

Regards

1 Like
2 
import {Injectable, Pipe, PipeTransform} from '@angular/core';
let format = require("date-fns/format");

@Pipe({
  name: 'dateformat'
})
@Injectable()
export class DateFormatPipe implements PipeTransform {
  transform(d: Date | string, fmt: string): string {
    let rv = format(d, fmt);
    return rv;
  }
}

<div class="timestamp">{{post.posted | dateformat:'YYYY年M月D日 HH:mm'}}</div>
2 Likes
3

How do you set the locale in the div? I assume you must import it in the pipe. Could you tell me how to do that?
I tried the following {{ post.posted | dateformat: ‘ddd D YYYY’, { locale: es } }} but got Object object in return.

4

You would need to do a couple of things: first add an options parameter to the pipe, and pass it through to format(). Then you need to change slightly the way you delineate the parameters in the template: multiple pipe parameters are separated by colons not commas.

5

Thank you @rapropos, I’ll try what you said. I’m fairly new to Ionic/Angular :confused:

1 Like
6

If you are using ngx-translate, another option would be to have the pipe inject TranslateService and figure out the locale on its own from it.

7

Yes I am using ngx-translate paired with date-fns

8

Then something like so should work:

constructor(private _xlator: TranslateService) {}

transform(d: Date | string, fmt: string): string {
  return format(d, fmt, {locale: this._xlator.currentLang});
}
9

what would currentLang be? (is there a place where you set it or is it the device’s default locale?)

10

Whatever ngx-translate thinks it is at that moment, so it would be dependent on how you’re setting languages for ngx-translate.

11

Where do you set languages for ngx-translate, sorry to keep asking :frowning:

12

Generally with use(). See the docs.

13

Hey @rapropos, this Is what ended up working for me.
Thank you for all your help :smiley:

import { Injectable, Pipe, PipeTransform } from '@angular/core';
import format from 'date-fns/format';
import * as esLocale from 'date-fns/locale/es/index.js';

@Pipe({
  name: 'dateformat'
})
@Injectable()
export class DateFormatPipe implements PipeTransform {

  format: string;

  constructor() {}

  transform(d: Date | string, fmt: string): string {
    return format(d, fmt, { locale: esLocale });
  }

}
1 Like
14

If anyone has a minute to look at this - when I try this, I get:

Argument of type ‘string | Date’ is not assignable to parameter of type ‘number | Date’.
Type ‘string’ is not assignable to type ‘number | Date’.ts(2345)

I am pretty much a beginner at Ionic :slight_smile:

PS - my locale is “en-NZ” so maybe that is causing the problem??

15

And maybe fixed it by replacing:

import format from ‘date-fns/format’;

with:

let format = require(“date-fns/format”);

16

No, what’s causing the problem is that this thread is several years old, and this major version upgrade happened in the meantime. Pay special attention to the section about how strings aren’t supported in v2 any more.

17

Thanks, rapropos - yes, I’m using the latest - but the underlying problem is that I am just learning my way around integrating things into a model Ionic/Angular setup I have inherited. Not a problem - I fixed that issue; created more :slight_smile: Thanks very much for the response!