JavaScriptで日付操作するDay.jsの使い方！挙動検証12個

Day.jsの使い方と、実際に使って検証したサンプルコードを載せています。
Day.jsは、JavaScriptで日付を使う際に簡単に処理できるライブラリです。

公式ドキュメントはこちらになります。

今回はVue.jsにnpmで導入して使用してみました。
コードの検証で使用しているバージョンは下記になります。

Day.jsを導入する

Day.jsを導入する方法です。

CDNでDay.jsを読み込む

CDNを使用して、Day.jsを使うには下記のように読み込むことが可能です。

<script src="https://unpkg.com/dayjs@1.8.21/dayjs.min.js"></script>

npmを使用してインストールする

npmを使用して、インストールするには下記のようにインストールします。

$ npm install dayjs

インストールすると、下記のようにpackage.jsonに追加されています。

"dependencies": {
  "@vuelidate/core": "^2.0.0-alpha.24",
  "@vuelidate/validators": "^2.0.0-alpha.21",
  "core-js": "^3.6.5",
  "dayjs": "^1.11.0",
  "vue": "^3.2.31"
}

Vue.jsで使う

Vue.jsで使用する場合も、上記の方法でインストールした後に使うことが可能です。
import文でdayjsを読み込んで、このように使用できます。

import dayjs from "dayjs"
export  default({
  setup() {
    const yearMonth = dayjs().format("YYYY-MM")
    console.log(yearMonth) // 結果：2022-04
  }
})

dayjs().format("YYYY-MM")で、現在の年月を取得することができました。

年月日と時分秒を取得する

Day.jsを使って、年・月・日、時・分・秒とミリ秒を取得してみます。

年/月/日を取得する

年・月・日を取得してみました。

const nowDay = dayjs()
console.log(nowDay.year()) // 2022
console.log(nowDay.month()) // 3
console.log(nowDay.date()) // 4

数値形式で取得されます。
気をつけるところですが上記で取得すると、月は0からカウントされるので、上記は4月を指しています。

時/分/秒/ミリ秒を取得する

時・分・秒とミリ秒を取得してみました。

const nowDay = dayjs()
console.log(nowDay.hour())　// 22
console.log(nowDay.minute()) // 30 
console.log(nowDay.second()) // 30
console.log(nowDay.millisecond()) // 670

日付をフォーマットして取得する

上記では、数値形式で取得しましたが、formatを使用すると文字列で取得することが可能です。
引数で渡した文字列にそって、フォーマットして返してくれます。(0埋めや適当な文字を、入れて日付を返すことが可能です。)
最初に年月をフォーマットして取得してみました。最後に、よく使いそうなフォーマット一覧を載せています。

公式ドキュメントのこちらに書いてある内容になります。

ハイフン付きで年月を取得する

例えばハイフン付きで年月を取得する場合には、下記のようにします。

const yearMonth = dayjs().format("YYYY-MM")
console.log(yearMonth) // 2022-04

“YYYY”で年になり、”MM”で月になります。
“YYYY-MM”とすることで、”[年]-[月]”の形で文字列が返ってきます。

年月の文字列を入れて取得する

上記の例と同じような形で、年と月をフォーマット文字列に渡すと、「XXXX年XX月」のように年月を入れることが可能です。

const yearMonth = dayjs().format("YYYY年MM月")
console.log(yearMonth) // 2022年04月

上記のように、入れたい文字列をフォーマットに含めることができます。
“YYYY年MM月”を渡すと、「2022年04月」という文字列になって返ってきます。

フォーマット一覧

よく使いそうなフォーマットのみ下記に並べてみました。
詳細は公式ドキュメントを確認してみてください。

指定年月でオブジェクトを作成する

dayjs()とやると、現在日でオブジェクトが作成されますが、指定年月日でオブジェクトを作成する方法です。
下記のように引数に年月日を渡すと、指定年月日でオブジェクトを作成することが可能です。

const dayObject = dayjs("2022-01-01");

日付オブジェクト作成後は、下記のように使えます。

const dayObject = dayjs("2022-01-01");
console.log(dayObject.format("YYYY年M月D日")); // 2022年1月1日

指定した年月日のオブジェクトで、フォーマットした「2022年1月1日」が出力されました。

日付の加算と減算

日付の加算と減算をしてみました。
最後に指定できる単位一覧を載せています。

日付を加算する

日付を加算する方法についてです。

年を加算する

1年後の年月を取得する場合は、下記のようになります。

const addOneYear = dayjs().add(1, 'years').format("YYYY年MM月")
console.log(addOneYear) // 2023年04月

addメソッドを呼び出すと、加算することが可能です。
第1引数に加算したい数値を入れて、第2引数に単位を入れます。

上記の例だと、第1引数に”1″を渡して、第2引数に”years”を渡しているので1年後になります。
それをフォーマットを使用して、”YYYY年MM月”としているので、結果が”2023年04月”になります。

月を加算する

上記と同じ要領で6ヶ月後を取得したい場合は、下記のようになります。

const addSixMonth = dayjs().add(6, 'months').format("YYYY年MM月")
console.log(addSixMonth) // 2022年10月

addメソッドを呼び出して、単位を’months’にしました。
これで6ヶ月後の「2022年10月」を取得して出力できました。

日付を減算する

加算の時と同じ要領で、減算することが可能です。
減算する場合にはsubtractメソッドを使うようにします。

年を減算する

加算の時と同じようにして、現在年から1年前を取得してみました。

const subOneYear = dayjs().subtract(1, 'years').format("YYYY年MM月")
console.log(subOneYear) // 2021年04月

subtractメソッドを使用することで、このように減算になります。

月を減算する

同じようにして、6ヶ月前を減算して取得してみました。

const subSixMonth = dayjs().subtract(6, 'months').format("YYYY年MM月")
console.log(subSixMonth) // 2021年10月

単位の一覧

加算や減算に指定できる単位は下記になります。

省略コードを指定することでも、同じ結果を得ることが可能です。
公式のこちらに載っている内容になります。

日付の判定

日付のオブジェクト同士を比較して、判定することが可能です。
未来日・過去日・同じ日かどうかを判定してみます。

未来日か判定する

isAfterメソッドを使用すると判定可能です。

const dayOne = dayjs("2022-04-01");
const dayTwo = dayjs("2022-02-01");
console.log(dayOne.isAfter(dayTwo)); // true

dayOne定数は「2022年4月1日」のオブジェクトです。
dayTwo定数は「2022年2月1日」のオブジェクトです。

dayOneからisAfterメソッドを呼んで、dayTwoを渡しました。
dayOneの方がdayTwoより未来日なので、trueが返ってきました。

過去日か判定する

isBeforeメソッドを使用すると判定可能です。
先ほどと同じように判定することができます。

const dayOne = dayjs("2022-04-01");
const dayTwo = dayjs("2022-02-01");
console.log(dayTwo.isBefore(dayOne)); // true

dayTwoからisBeforeメソッドを呼んで、dayOneを渡しました。
dayTwoの方がdayOneより過去日なので、trueが返ってきました。

同じ日か判定する

isSameメソッドを使用すると判定可能です。

const dayOne = dayjs("2022-01-01");
const dayTwo = dayjs("2022-01-01");
console.log(dayTwo.isSame(dayOne)); // true

dayOneとdayTwoのどちらも「2022年1月1日」のオブジェクトです。
dayTwoからisSameメソッドを呼んで、dayOneを渡しました。
同じ年月日なので、trueが返ってきます。