dayjs.jsを使った日時処理方法です。
以前「moment.jsを使って日時処理を簡単に表示する方法」を紹介しましたが、dayjs.jsも結構使われてる様なのでご紹介します。
Contents
ディスプレイ広告
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>
dayjs.jsを使った日時処理表示デモページ
ソース元:Day.js・2kB JavaScript date utility library
Day.js・2kB JavaScript date utility library
※流用される場合は自己責任でお願いします。
デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。