『自由力』を身に付けるサイト「リバトレ」も見てね!!

【Angular】Pipeで日付のカスタマイズをする方法!

悩んでいる男の子

AngularのPipeで日付のカスタマイズをしたいんだけど、やり方が分からないんだよね。。

こんな悩みを解決します。

  • 本記事の内容
  • Pipeで日付のカスタマイズをする方法
  • 具体的なソースコード
  • 本記事の執筆者
プロフィール
どこの写真だよ
  • 長身ガリガリ自称イケメン(1993/4/1生)
  • 元エンジニア(歴7年)、資格保有数約20個(IT系以外も含む)
  • 副業(物販)5か月目で月利30万円⇒脱サラ
  • 物販、システム開発、アフィリエイト、投資を細々とやっています。
  • 物販は彼女と楽しみながらやってます!

今回は、Pipeで日付のカスタマイズをする方法を解説します

いずみん

すぐ終わるので、最後まで読んでみてください!

目次

日付パイプのデフォルトはこちら

こちらが公式サイトになります。

ここに記載のないものはカスタマイズするしかありません。

今回実施する内容

今回は、「YYYYMMDD」形式を「YYYY/MM/DD」に変換してみます。

Pipeで日付カスタマイズをする方法

ng g pipe date-yyyy-mm-dd-slash

まずはPipeを作成します。

import { Pipe, PipeTransform } from '@angular/core';
/**
 * 日付パイプ(yyyy/MM/DD)
 *
 * @author K.Izumi
 */
@Pipe({
  name: 'dateYyyyMmDdSlash'
})
export class DateYyyyMmDdSlashPipe implements PipeTransform {
  /**
   * 日付(yyyyMMdd)を日付(yyyy/MM/dd)に変換する
   *
   * @param value 日付(yyyyMMdd)
   * @param args 引数
   * @return 日付(yyyy/MM/dd)
   */
  transform(value: any, args?: any): any {
    return value.substr(0, 4) + '/' + value.substr(4, 2) + '/' + value.substr(6, 2);
  }
}

上記のように実装します。

{{ value | dateYyyyMmDdSlash }}

あとは、HTML側で使用するだけです。

まとめ

今回は、Pipeで日付のカスタマイズをする方法を解説しました

パイプのカスタマイズは意外と簡単でしたね。

ではまた!

  • おススメ本はこちら!
いずみん

僕は↓の本でAngularの勉強をしました!
非常に分かりやすいので是非!

【Angular】Pipeで日付カスタマイズをする方法!

この記事が気に入ったら
フォローしてね!

シェアするんやで!

~ リバトレ ~

お金や副業に関する情報を発信しているよ!

この記事を書いた人

いずみんのアバター いずみん 自由力発信おじ

【自由力発信】うさんくさ笑 | 副業物販で5ヶ月目に月利30万円達成⇨脱サラ予定 | 物販(アパレルせどり)・アフィリエイト・投資で自由になるための情報を発信中?笑 | 元エンジニア | 保有資格約20個

関連記事

コメント

コメントする

目次
閉じる