dayjs.jsを使った日時処理｜DAD UNION

dayjs.jsを使った日時処理方法です。
以前「moment.jsを使って日時処理を簡単に表示する方法」を紹介しましたが、dayjs.jsも結構使われてる様なのでご紹介します。

Contents

dayjs.jsを使った日時処理を表示するCSS記述
dayjs.jsを使った日時処理を表示するHTML記述
ayjs.jsを使った日時処理を表示するJavaScriptの記述
dayjs.jsを使った日時処理表示デモページ
ソース元：Day.js・2kB JavaScript date utility library

dayjs.jsを使った日時処理を表示する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>

dayjs.jsを使った日時処理を表示する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>

ayjs.jsを使った日時処理を表示するJavaScriptの記述

※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>