Posted: 2018.11.16 / Category: javascript 

JavaScriptの日付操作ライブラリではMoment.jsが有名ですが、同等の機能を持ち、軽量（2KB）で多くのブラウザをサポートしたDay.jsをご紹介します。

インストール

NPMでインストールする場合は下記を実行。

npm install dayjs --save

CDNから読み込んで使用することもできます。

<script src="https://unpkg.com/dayjs"></script>
<script src="https://unpkg.com/dayjs@1.7.7/locale/ja.js"></script>

使い方

日本語環境で使用する場合は最初にグローバルでlocaleの指定をします。

dayjs.locale('ja');

フォーマットを指定して現在の日付を表示

dayjs().format('YYYY年MM月DD日 dddd')); // 2018年11月16日 金曜日

文字列をパースして表示

dayjs('2018-08-08').format('YYYY年MM月DD日 dddd'); // 2018年08月08日 水曜日

1ヶ月後・1ヶ月前を表示

dayjs().add(1, 'month').format('YYYY年MM月DD日 dddd');
dayjs().subtract(1, 'month').format('YYYY年MM月DD日 dddd');

日付の比較

dayjs('2018-08-08').isBefore('2018-08-09'); // true

プラグインの追加

Day.jsはプラグインとして様々な機能を追加することができます。
例えば●日前という表記をする場合は「relativeTime」というプラグインを使用します。

NPMで使用する場合

import relativeTime from 'dayjs/plugin/relativeTime'
dayjs.extend(relativeTime)

CDNで使用する場合

<script src="https://unpkg.com/dayjs/plugin/relativeTime"></script>
<script type="text/javascript">
dayjs.extend(dayjs_plugin_relativeTime);
></script>

dayjs().to(dayjs('2018-11-10')); // 7日前

日本語のドキュメントも用意されていますので、詳しくは下記を参照ください。

iamkun/dayjs