Open2
Day.jsの使い方・まとめ
ピン留めされたアイテム
まさぴょんDay.js の使い方・まとめ
- Moment.jsが非推奨なので、日付操作系のライブラリは、構文が似ており人気の高いDay.jsを採用。
1. Day.jsのインストール
bash
npm install dayjs
# または
yarn add dayjs
2. Day.jsのインポート & location(位置情報)の設定
javascript
/** Day.js 関連の import */
import dayjs from "dayjs";
import ja from "dayjs/locale/ja";
/** NOTE: location(Japan)を設定する */
dayjs.locale(ja);
3. 現在の日付と時刻を取得
javascript
/** 現在の日付と時刻を取得 */
const date = dayjs();
console.log("date", date); // day.js Object
4. カスタム日付を作成
javascript
const customDate = dayjs("2023-09-30");
console.log("customDate", customDate); // day.js Object
5. 日付のフォーマット
javascript
const formattedDate = date.format("YYYY-MM-DD HH:mm:ss");
console.log("formattedDate", formattedDate); // 日付文字列
6. 1日後の日付を取得する
javascript
/** 日付の操作 => 1日後の日付を取得 */
const newDate = date.add(1, "day");
console.log("newDate", newDate);
7. 6ヶ月前の日付を取得する
const today = dayjs();
console.log('today', today); // day.js Object
// today から 6 ヶ月前の日付を取得
const sixMonthsAgo = today.subtract(6, 'month');
console.log('sixMonthsAgo', sixMonthsAgo); // day.js Object
8. 現在の日時とタイムスタンプの差分を計算する & 180日以内かどうか判定する
/**
* プロフィールの最新・更新日時と現在の差分を取得する
* - 180日以内の場合は、最新の状態として表示する
* - 180日以上の場合は、更新ボタンを表示する
*/
const daysDiff = dayjs().diff(update_date, 'days');
console.log('daysDiff: ', daysDiff);
const isLatestFlag = daysDiff < 180;
console.log('isLatestFlag: ', isLatestFlag);
9. 日付の比較
- day.js Object同士で、比較する必要がある
javascript
/** date が customDateより前かどうか */
const isBefore = date.isBefore(customDate);
console.log("isBefore", isBefore);
10. タイムスタンプで、日付の比較
- day.js Object同士をタイムスタンプで比較する
javascript
if (dayjs(dates.startDate).unix() === dayjs(dates.endDate).unix()) {
console.log('同じ日付なので、処理しない');
return;
}
Day.jsの使い方・参考情報
-
Moment.jsが非推奨なので、移行先は構文が似ており人気の高いDay.jsになりました。
-
https://github.com/iamkun/dayjs/blob/dev/docs/ja/README-ja.mdにAccessで、日本語README.md