AngularJSのdateフィルタで date string がパースできない問題

なにがしたい？

AngularJS に備わっている date フィルタ。

IN

{{ date_to_show | date:'y年M月d日' }}

OUT

2018年6月2日

日付や時刻（タイムスタンプ）をあらゆる書式に手軽に変換できてとても便利なのですが、これ、date_to_showがDateオブジェクトじゃないとダメという制約があります。つまり事前にこうしておかないとダメ。

date_string = '2018-06-02';
date_to_show = new Date( date_string );

いわゆる date string (日付書式の文字列）を与えたらどうなるか？

IN

{{ date_string | date:'y年M月d日' }}

OUT

2018-06-02

dateフィルタはうまく扱えず、何も言わずにそのまんま出てきます。これは不便。日付だけ事前にJSでnew Dateしないとダメ？ なんとかフィルタだけで解決したい。Googleさん助けて！と思ったのに、Googleさんが助けてくれなかったので、僭越ながら穴埋め係させていただきます…。

結論

new Date するフィルタを定義

app.filter('parsedate', [
  function() {
    return function(date_string) {
      return new Date(date_string);
    };
  }
]);

こんなものを作っておいて、かまします。

IN

{{ date_string | parsedate | date:'y年M月d日' }}

OUT

2018年6月2日

Googleさんたちに聞いてまわったところ、フィルタを作るところまでは教えてくれたのですが、そのフィルタで書式の変更までしていたので、いや書式の変更は既存のdateフィルタに任せるとかできないのかなと思ったけど、できちゃいました、というお話でした。

Coffeeでの適用例

app は対象の controller でも大丈夫です。また、お世話になっているプロジェクトだと CoffeeScript なので、こんな感じ。上記JSでもそうですが、引き渡す関数が 配列 なのがささやかなハマりポイントです。

mainControllers.filter 'parsedate', [() ->
    ( date_string ) ->
      new Date date_string
  ]

追記 すみません。配列じゃなくても大丈夫でした。

mainControllers.filter 'parsedate', () ->
    ( date_string ) ->
      new Date date_string