How to easily process dates and times with dayjs.js

This time, we will introduce how to easily display dates and times using dayjs.js, a lightweight JavaScript date-time processing library.
Previously, we introduced “moment.js made easy! Methods and examples for handling dates and times in JavaScript”, but dayjs.js is also a very popular and easy-to-use library.

CSS Description

First, set the page style using CSS. Adjust the styles below as needed.

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

Next, set the display areas using HTML. Here, we prepare areas to display “Get today’s date and time”, “Get a specified date and time”, and “Get day of the week”.
Each area also includes explanations on how to retrieve values using dayjs.js.

<h1>Display of various date-time operations using dayjs.js</h1>

<h2>Get Today’s Date and Time</h2>
<div>
  dayjs().format()
  <p id="today-df"></p>
</div>

<h2>Get a Specified Date and Time</h2>
<div>
  dayjs('2020/1/1 11:45:20').format()
  <p id="YYYYMMDD"></p>
</div>

<h2>Get Day of the Week</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 Description

Finally, use JavaScript to utilize the features of dayjs.js.
The following script loads dayjs.min.js, ja.js, and isSameOrBefore.js from CDN and sets formatting for each date-time value.
Write dayjs().format(“format”). Specify the desired date-time format in “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") + " retrieved { 0: 'Sun', 1: 'Mon', 2: 'Tue', 3: 'Wed', 4: 'Thu', 5: 'Fri', 6: 'Sat' }";

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>

Demo Page: Date-Time Processing Display Using dayjs.js

You can check the actual working demo page from the link below.

Demo page for date-time processing using dayjs.js

Source: Day.js · 2kB JavaScript date utility library

For more details, refer to the official website below.

Day.js · 2kB JavaScript date utility library

Summary

This was an introduction to how to easily handle date and time using dayjs.js.
Although lightweight, dayjs.js provides powerful date-time processing functions, making it a valuable addition to your projects.
Especially if you are looking for a lightweight library, dayjs.js is an excellent choice.
Try it out and experience its convenience firsthand.

　
*If you reuse this content, please do so at your own risk.
Do not copy the Google Analytics tag inside the demo page’s head tag.*