実務のアプリケーション開発でDay.jsを使っているため、忘備録を兼ねて使い方を記す。
Day.jsとは？
Day.jsは、日付と時間を扱うための軽量なJavaScriptライブラリ。Moment.jsのような機能を提供しつつ、パフォーマンスを考慮して作られている。特に、Day.jsは非常に小さいサイズ（約2kB）であり、ブラウザやNode.jsで簡単に利用できる。
基礎的な使い方
- インストール
npm install dayjs --save- インポート
import dayjs from 'dayjs'
// もしくは
import * as dayjs from 'dayjs'tsconfig.jsonに以下の記述を追加することで、上記の記述で利用できるようになる。
{
"compilerOptions": {
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
}
}- 現在日付時刻を取得
dayjs()の引数のデフォルト値はundefinedであるため、現在時刻を取得できる。一方で引数がnullの場合、Invalid Dateとなる。
// Tue, 29 Aug 2023 11:13:17 GMT
dayjs()
dayjs(undefined)
// Invalid Date
dayjs(null)- フォーマット
https://day.js.org/docs/en/parse/string-format
// 2023-08-29 20:13:40
dayjs().format('YYYY-MM-DD HH:mm:ss')
// 30-08-2023 08:41:18
dayjs().format('DD-MM-YYYY HH:mm:ss')- Unix Timestampを取得
Unixタイムスタンプ（Unix Timestamp）は、1970年1月1日 00:00:00 UTC（協定世界時）からの経過秒数を整数で表したもの。UnixタイムスタンプはUTCで定義されているため、タイムゾーンに依存しない。
// 秒: 1693352590
dayjs().unix()
// ミリ秒: 1693352590288
dayjs().valueOf()dayjs().valueOf() が返す Unix タイムスタンプは、1970年1月1日 00:00:00 UTC からの経過ミリ秒を表す。この値は世界中どこで計測しても同じ（同じ瞬間に取得した場合）。
日本（UTC+9）とアメリカ・ロサンゼルス（UTC-8）などで dayjs().valueOf() を実行した場合、実行した瞬間が同じであれば、その返り値も同じになる。
- UTC
UTC（協定世界時）は、世界中で共通の時間基準の一つ。各国または地域はUTCからのオフセットを使って、ローカルタイムを決定する。例えば、日本時間（JST）はUTC+9時間となる。アプリ開発での使い方の例としては、日時を保存する際はUTCを使用し、表示する際にユーザーのタイムゾーンに変換するなど。
import dayjs from 'dayjs'
// utcプラグインをインポートする
import utc from 'dayjs/plugin/utc'
dayjs.extend(utc)
// 2023-08-30T06:04:42Z
dayjs.utc().format()- Validation
Dayjs の日付が有効かどうかを判定することができる。
// false
dayjs('hogehoge hogehoge').isValid()
dayjs(null).isValid()
// true
dayjs('2022-01-33').isValid()- ミリ秒、秒、分、時間、日、週、月単位の値を取得する（以下の場合、基準は現在時刻）
// 現在時刻: 2023-08-30T15:29:24+09:00
dayjs().format()
// ミリ秒: 797
dayjs().millisecond()
// 秒: 24
dayjs().second()
// 分: 29
dayjs().minute()
// 時間: 15
dayjs().hour()
// 日: 30
dayjs().date()
// 月: 8
dayjs().month() + 1
// 年: 2023
dayjs().year()- dayOfWeek、dayOfYear、weekOfYearを取得する。プラグインが必要。
import dayjs from 'dayjs'
import weekOfYear from 'dayjs/plugin/weekOfYear'
import dayOfYear from 'dayjs/plugin/dayOfYear'
dayjs.extend(dayOfYear)
dayjs.extend(weekOfYear)
// day of week: 3
dayjs().day()
// day of year: 242
dayjs().dayOfYear()
// week of year: 35
dayjs().week()- Add、Subtract
日付データを任意の位置に進めたり、戻したりする。
// 2023-08-31T00:00:00+09:00
dayjs('2023-08-30').add(1, 'day').format()
// 2023-09-30T00:00:00+09:00
dayjs('2023-08-30').add(1, 'month').format()
// 2022-08-30T00:00:00+09:00
dayjs('2023-08-30').subtract(1, 'y').format()
// 2023-07-30T00:00:00+09:00
dayjs('2023-08-30').subtract(1, 'M').format()第一引数に指定する単位のオプションは以下の通り。
| 単位 | 省略記法 | Description |
|---|---|---|
day | d | 日 |
week | w | 週 |
month | M | 月 |
quarter | Q | Quarter ( dependent QuarterOfYear plugin ) |
year | y | 年 |
hour | h | 時間 |
minute | m | 分 |
second | s | 秒 |
millisecond | ms | ミリ秒 |
- startOf、endOf
dayjs()の引数に指定した日付の開始と終了地点を取得する。
// 2023-08-30T00:00:00+09:00
dayjs('2023-08-30').startOf('day').format()
// 2023-01-01T00:00:00+09:00
dayjs('2023-08-30').startOf('year').format()
// 2023-08-31T23:59:59+09:00
dayjs('2023-08-30').endOf('month').format()
// 2023-09-02T23:59:59+09:00
dayjs('2023-08-30').endOf('week').format()引数に指定するオプションは以下の通り。
| Unit | Shorthand | Description |
|---|---|---|
year | y | startOf: 該当年度の1/1 00:00:00 endOf: 該当年度の12/31 23:59:59 |
month | M | startOf: 該当月の1日 00:00:00 endOf: 該当月の末日 23:59:59 |
week | w | startOf: 該当週の開始日 00:00:00 endOf: 該当週の末日 23:59:59 |
date | D | startOf: 該当日の00:00:00 endOf: 該当日の23:59:59 |
day | d | startOf: 該当日の00:00:00 endOf: 該当日の23:59:59 |
【実践】input[type="date"]の入力部品から取得した日付データをunixtimeに変換する
<template>
<v-container>
<v-text-field type="date" v-model="dateTimeValue" @change="changeDate()"></v-text-field>
</v-container>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
import dayjs from 'dayjs'
export default defineComponent({
name: 'DayJsTestPane',
setup () {
const dateTimeValue = ref('')
const changeDate = () => {
if (dateTimeValue.value) {
// unixtimeに変換
console.log(dayjs(dateTimeValue.value).valueOf());
}
}
return {
dateTimeValue,
changeDate
}
}
})
</script>
コメント