フロントエンド開発といえば。
react アプリの初期化( npm init vite@latest <アプリ名> )

dayjs (day.js) + typescript で 日付を扱う

● dayjsのインストール

npm install dayjs
npm install dayjs @types/dayjs
npm install dayjs/plugin/timezone

● 現在時刻を表示する

console.log(dayjs().format('YYYY-MM-DD HH:mm:ss'))

● 日付を加算、減算する(次の日、前の日など)

日時の加算には addメソッド
日時の減算には subtractメソッド

https://day.js.org/docs/en/manipulate/add

// 年の場合 → 「year または y」を指定して加算(または減算)します
dayjs().add(2, 'y')
dayjs().subtract(2, 'year')

● タイムゾーンの自動変換

バックエンドサーバーがUTCで日付けを取り扱っていて、タイムゾーン付き文字列で返してくる場合は ブラウザのタイムゾーンに自動変換されます。

2023-01-10T22:45:00.000Z
T が日付と時間の区切り。
Z がタイムゾーンUTC 時刻であること。 を意味します。

dayjsでの自動変換例

dayjs(new Date("2023-01-10T22:45:00.000Z")).format("HH:mm")
↓
(日本語が設定されているブラウザの場合は、dayjs関数実行時にブラウザのローカルタイムゾーンJST-9が設定される。)
07:45

● timezoneを扱う .tz() メソッドを使用できるようにする

import dayjs from 'dayjs'
import timezone from "dayjs/plugin/timezone";
import utc from "dayjs/plugin/utc";
dayjs.extend(timezone);
dayjs.extend(utc);

● 現在時刻を UTC の文字列で表示する

console.log(dayjs().utc().format('YYYY-MM-DD HH:mm:ss')) // 2023-11-12 23:59:00

console.log(dayjs().utc().format()) // 2023-11-12T23:59:00Z

● タイムゾーン付き文字列を各タイムゾーンごとに変換して表示する

受け取った時刻を Asia/Vladivostok で表示

import dayjs from 'dayjs'
import timezone from "dayjs/plugin/timezone";
import utc from "dayjs/plugin/utc";

dayjs.extend(timezone);
dayjs.extend(utc);

console.log(
dayjs("2023-10-10T13:50:40+09:00")
  .tz("Asia/Vladivostok")
  .format("YYYY-MM-DD HH:mm:ss")
);
// 2023-10-10 14:50:40

受け取った時刻を Asia/Tokyo で表示

import dayjs from 'dayjs'
import timezone from "dayjs/plugin/timezone";
import utc from "dayjs/plugin/utc";

dayjs.extend(timezone);
dayjs.extend(utc);

console.log(
dayjs("2023-10-10T13:50:40+09:00")
  .tz("Asia/Tokyo")
  .format("YYYY-MM-DD HH:mm:ss")
);
// 2023-10-10 13:50:40

https://qiita.com/kidatti/items/272eb962b5e6025fc51e

参考 : https://bit.ly/3cywKQ8
https://qiita.com/taisuke-j/items/58519f7ecd5ae3a1db0c

No.2207
11/13 08:36

edit