Riotのコンポーネント作り3日目 -日付表示

3ヶ月空けたと思ったら1週間も空けずに次を作る計画性のなさ。どうもクロパンダです。

今回は日付をフォーマットして表示してくれる要素を作りました。

<date format="yyyy/MM/dd(E)"></date>

日付フォーマット

format属性で日付フォーマットを指定します。日付フォーマットはJavaのDateTimeFormatterの形で指定してください。

yyyy/MM/dd(E) -> 2017/01/18(Wed)
M/d/yy(EEEEE) -> 1/18/17(Wednesday)

こんな感じで使います。

詳しいところまで踏み込むと結構面倒なので、簡略化して説明します。

• yyyy …西暦を4桁で表示します。ないとは思いますが、3桁以下のときは左側を0でつめて4桁にします。
• yy …西暦の下2桁を表示します。
• MM…ゼロフィルして2桁で月を表示します。
• M…ゼロフィルせずに月を表示します。
• MMM… 月を英語名3文字で表記します。1月ならJanという具合です。
• MMMM…月を省略せずに英語名で表記します。1月ならJanuaryという具合です。
• dd…ゼロフィルして2桁で日を表示します。
• d…ゼロフィルせずに日を表示します。
• E or EE or EEE…曜日を英語名3文字で表示します。日曜日ならSunという具合です。
• EEEE…曜日を省略せずに英語名で表示します。日曜日ならSundayという具合です。
• EEEEE…曜日を英語名頭文字のみで表示します。日曜日ならSという具合です。

結構こみいった仕様なので、主要なものだけ書きました。詳しく知りたい方はこちらをご覧ください(ただし、分や秒など日付を表示するのに関係ない部分は実装していません)。

コード

<date></date>
<script src="https://cdnjs.cloudflare.com/ajax/libs/riot/2.6.2/riot.min.js"></script>
<script src="date.js"></script>
<script>
        riot.mount('date')
</script>

github.com