Zenn
📅

Day.jsの簡単な使い方 便利な日付操作ライブラリ

2021/12/27に公開

JavaScriptの便利な日付操作ライブラリDay.jsを使用する機会があったので、誰でも簡単に扱えるようにDay.jsの便利な機能の一部をまとめました。

https://day.js.org/en/

インストールの方法

// npm
npm install dayjs
// yarn
yarn add dayjs

言語の設定

locale()で言語が設定できます。
言語を設定することでSunday日曜日December12月のように表示させることができます。

// 日本語
dayjs.locale("ja")
// 英語
dayjs.locale("en")

dayjsオブジェクトの生成

現在の時間から生成

dayjs関数の引数に値を指定しないことで現在の時間からdayjsオブジェクトを生成できます。

dayjs()

指定した時間から生成

dayjs関数の引数にDateオブジェクトまたは日付文字列を指定してdayjsオブジェクトを生成できます。

dayjs(new Date(2020, 4-1, 1, 12, 30, 45))
dayjs("2020/4/1 12:30:45")
dayjs("2020-4-1 12:30:45")
dayjs("April 1, 2020 12:30:45")

タイムスタンプの取得

秒単位のタイムスタンプを取得

unix()で秒単位のタイムスタンプを取得できます。

dayjs().unix()
VanillaJSでの記述方法
Math.floor(new Date().getTime()/1000)

ミリ秒単位のタイムスタンプを取得

valueOf()でミリ秒単位のタイムスタンプを取得できます。

dayjs().valueOf()
VanillaJSでの記述方法
new Date().getTime()

年月等の初めと終わりの値の操作

月初の値の取得

startOf('month')で月初の値を取得できます。

dayjs().startOf('month')

dayjs('2000-01-10').startOf('month').unix()(2000年1月10日の月初)の出力結果はdayjs('2000-01-01T00:00:00').unix()(2000年1月1日)と同様の946652400となります。

VanillaJSでの記述方法
const date = new Date()
Math.floor(new Date(date.getFullYear(), date.getMonth(), 1).getTime() / 1000)

月末の値の取得

endOf('month')で月末の値を取得できます。

dayjs().endOf('month')

dayjs('2000-01-10').endOf('month').unix()(2000年1月10日の)の出力結果はdayjs('2000-01-31T23:59:59').unix()(2000年1月31日23時59分59秒)と同様の949330799となります。

VanillaJSでの記述方法
const date = new Date()
Math.floor(new Date(date.getFullYear(), date.getMonth() + 1, 0, 23, 59, 59).getTime() / 1000)

その他の値の取得

月初や月末だけでなく、年始、年末、週始、週末、1日の始めと終わりの値なども取得できます。
詳細は以下の公式ページにあります ↓
https://day.js.org/docs/en/manipulate/start-of#list-of-all-available-units

年月等の未来と過去の値の操作

先月の値を取得

subtract()で先月の値を取得できます。

dayjs().subtract(1, "month")
VanillaJSでの記述方法
const date = new Date()
new Date(date.getFullYear(), date.getMonth() - 1, date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds())

来月の値を取得

add()で来月の値を取得できます。

dayjs().add(1, "month")
VanillaJSでの記述方法
const date = new Date()
new Date(date.getFullYear(), date.getMonth() + 1, date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds())

その他の値の取得

先月や来月だけでなく、前年、来年、先週、来週、2ヶ月前や2ヶ月後の値なども取得できます。
詳細は以下の公式ページにあります ↓
https://day.js.org/docs/en/manipulate/add#list-of-all-available-units

取得する文字列のフォーマットの指定

format()で取得する文字列のフォーマットを指定できます。

dayjs().format('YYYY/M/D')
VanillaJSでの記述方法
`${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`

年月日時間の表示形式の種類は様々用意されています。
詳細は以下の公式ページにあります ↓
https://day.js.org/docs/en/display/format#docsNav

まとめ

Day.jsでは他にも様々な操作を行うことができますので、ぜひ活用してみてください。

Discussion

ログインするとコメントできます