オフィス狛 技術部のKoma（Twitterアカウントの中の人＆CEO）です。
前回、AngularのPipeを使ってhtml(View)の表示を共通化する。と言う記事を書きましたが、実は実装をしている時に一つハマったことがあります。
最終的な実装の前に記載していたプログラムは以下の通りです。
import { Pipe, PipeTransform } from '@angular/core';
import * as moment from 'moment';
@Pipe({
name: 'changeDateFormat'
})
export class ChangeDateFormatPipe implements PipeTransform {
transform(value: string, args?: any): any {
const postDate = moment(value).format('YYYYMMDD');
const today = moment().format('YYYYMMDD');
const yesterday = moment().subtract(1, 'days').format('YYYYMMDD');
let displayDate: string = value;
if (postDate === today) {
displayDate = '今日';
} else if (postDate === yesterday) {
displayDate = '昨日';
}
return displayDate;
}
}
上記で実行すると・・・・
Deprecation warning: value provided is not in a recognized RFC2822 or ISO format. moment construction falls back to js Date(), which is not reliable across all browsers and versions. Non RFC2822/ISO date formats are discouraged and will be removed in an upcoming major release. Please refer to http://momentjs.com/guides/#/warnings/js-date/ for more info. Arguments: [0] _isAMomentObject: true, _isUTC: false, _useUTC: false, _l: undefined, _i: 2018/09/01, _f: undefined, _strict: undefined, _locale: [object Object] Error
とエラーになってしまいます。
momentに引き渡す日付は、ISO形式ではなくていけないようです。 ただ、そもそもの値が文字列なので、文字列操作でISO形式にフォーマットするのが面倒・・・ と言う事で、前回の実装では、
const postDate = new Date(value);
const postDateISO = moment(postDate.toISOString()).format('YYYYMMDD');
上記のように一度日付に戻してから、「toISOString()」を使うようにしました。元々、トラブルの多い「new Date()」を使いたく無いので、momentにしたのですが・・・
と言う訳で、最終的な実装は、前回も記載した通り、
import { Pipe, PipeTransform } from '@angular/core';
import * as moment from 'moment';
@Pipe({
name: 'changeDateFormat'
})
export class ChangeDateFormatPipe implements PipeTransform {
transform(value: string, args?: any): any {
const postDate = new Date(value);
const postDateISO = moment(postDate.toISOString()).format('YYYYMMDD');
const today = moment().format('YYYYMMDD');
const yesterday = moment().subtract(1, 'days').format('YYYYMMDD');
let displayDate: string = value;
if (postDateISO === today) {
displayDate = '今日';
} else if (postDateISO === yesterday) {
displayDate = '昨日';
}
return displayDate;
}
}
となります。
上記実装を参考にされる方は、タイムゾーンに注意して下さいね。
Angular , moment.js
