JavaScript

dayjs.jsで簡単に日時処理を行う方法

  /

今回は、JavaScriptの軽量な日時処理ライブラリであるdayjs.jsを使って、日時を簡単に表示する方法をご紹介します。
以前、「moment.jsで簡単！JavaScript日時処理の方法と実例」を紹介しましたが、dayjs.jsも非常に使いやすいライブラリとして人気があります。

Contents

CSS記述

まず、CSSを使用してページのスタイルを設定します。以下のスタイルは必要に応じて調整してください。

<style>
body {
  font-size: 18px;
  text-align: center;
  line-height: 1.6em;
}
h1{
  text-align: center;
  font-size: 20px;
  line-height: 1.6em;
  padding: 20px 0 0 0;
}
p{
  padding-bottom: 20px;
}
</style>

HTML記述

次に、HTMLを使用して表示エリアを設定します。ここでは、「本日日時の取得」、「指定日時の取得」、「曜日の取得」を表示するためのエリアを用意しています。
各エリアにはdayjs.jsを使って取得する処理方法も記述してます。

<h1>dayjs.jsを使った各日時処理を以下に表示</h1>

<h2>本日日時の取得</h2>
<div>
  dayjs().format()
  <p id="today-df"></p>
</div>

<h2>指定日時の取得</h2>
<div>
  dayjs('2020/1/1 11:45:20').format()
  <p id="YYYYMMDD"></p>
</div>


<h2>曜日の取得</h2>
<div>
  dayjs().format('d') or dayjs().day()
  <p id="ja-d"></p>
</div>
<div>
  dayjs().format('ddd')
  <p id="ja-ddd"></p>
</div>
<div>
  dayjs().format('dddd')
  <p id="ja-dddd"></p>
</div>
<div>
  dayjs().format('ddd')
  <p id="en-ddd"></p>
</div>
<div>
  dayjs().format('dddd')
  <p id="en-dddd"></p>
</div>

JavaScriptの記述

最後に、JavaScriptを使用してdayjs.jsの機能を活用します。以下のスクリプトでは、CDNからdayjs.min.js、ja.js、isSameOrBefore.jsファイルを読み込み、各日時のフォーマットを設定しています。
dayjs().format(“フォーマット”)を記述します。”フォーマット”に日時のフォーマット等を指定します。

<script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dayjs@1.11.6/locale/ja.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dayjs@1.11.6/plugin/isSameOrBefore.js"></script>
<script>
const todayDf = document.getElementById("today-df");
todayDf.innerHTML = dayjs().format();

const YYYYMMDD = document.getElementById("YYYYMMDD");
YYYYMMDD.innerHTML = dayjs("2020/1/1 11:45:20").format();

dayjs.locale("ja");
const week_ja_d = document.getElementById("ja-d");
week_ja_d.innerHTML = dayjs().format("d") + "を取得 { 0: '日', 1: '月', 2: '火', 3: '水', 4: '木', 5: '金', 6: '土' }";

const week_ja_ddd = document.getElementById("ja-ddd");
week_ja_ddd.innerHTML = "locale=ja: " + dayjs().format("ddd");

const week_ja_dddd = document.getElementById("ja-dddd");
week_ja_dddd.innerHTML = "locale=ja: " + dayjs().format("dddd");

dayjs.locale("en");
const week_en_ddd = document.getElementById("en-ddd");
week_en_ddd.innerHTML = "locale=en: " + dayjs().format("ddd");

const week_en_dddd = document.getElementById("en-dddd");
week_en_dddd.innerHTML = "locale=en: " + dayjs().format("dddd");
</script>

dayjs.jsを使った日時処理表示デモページ

実際に動作するデモページを以下のリンクから確認できます。

dayjs.jsを使った日時処理表示デモページ

ソース元：Day.js・2kB JavaScript date utility library

詳しい情報は、以下の公式サイトを参照してください。

Day.js・2kB JavaScript date utility library

まとめ

以上が、dayjs.jsを使って簡単に日時処理を行う方法の紹介でした。dayjs.jsは軽量でありながら強力な日時処理機能を提供してくれるため、プロジェクトに導入する価値があります。特に、軽量なライブラリを求めている場合には、dayjs.jsは最適な選択肢と言えるでしょう。ぜひ、実際に試してみて、その利便性を実感してください。

　
※流用される場合は自己責任でお願いします。
　デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。

日付フォーマット 日時処理 dayjs
関連記事