過去我們習慣使用 moment.js / date-fns 或 luxon 等套件來處理日期時間，但也許在一些情況下，我們可以簡單使用原生 JavaScript 來達到相同的功能。
Parse - Date
假設你需要 parse 一個 YYYY-MM-DD 格式的日期字串，你可以透過簡單的 regex 來達到：
const datePattern = /^(\d{4})-(\d{2})-(\d{2})$/;
const [, month, day, year] = datePattern.exec("2024-05-21");
new Date(`${month}, ${day} ${year}`);
// Tue May 21 2024 00:00:00 GMT+0800 (Taipei Standard Time)
Parse - Date + Time
原生 Date 物件可以 parse 以下的日期時間字串：
// now
new Date();
// datetime string
new Date("2024-05-21T19:19:00");
// Tue May 21 2024 19:19:00 GMT+0800 (Taipei Standard Time)
// datetime with milliseconds and timezone
new Date("2024-05-21T19:19:00.000+08:00");
// Tue May 21 2024 19:19:00 GMT+0800 (Taipei Standard Time)
// timestamp milliseconds since Unix epoch
new Date(01716289667000);
// Tue May 21 2024 19:07:47 GMT+0800 (Taipei Standard Time)
// ISO 8601 date string
new Date("2024-05-21T11:10:31.057Z");
// Tue May 21 2024 19:10:31 GMT+0800 (Taipei Standard Time)
// Individual date and time component values
new Date(2024, 4, 21, 11, 10, 31, 57);
// Tue May 21 2024 11:10:31 GMT+0800 (Taipei Standard Time)
如果你需要 parse 其他格式，如 YYYY-MM-DD HH:mm:ss 格式的日期時間字串，你可以透過簡單的 regex 來達到：
const datePattern = /^(\d{4})-(\d{2})-(\d{2})\s(\d{1,2}):(\d{2}):(\d{2})$/;
const [, year, month, day, rawHour, min, sec] = datePattern.exec(
"2024-05-21 10:54:08"
);
new Date(`${year}-${month}-${day}T${("0" + rawHour).slice(-2)}:${min}:${sec}`);
// Tue May 21 2024 10:54:08 GMT+0800 (Taipei Standard Time)
Get
獲得日期時間的 Year, Month, Day, Hour, Minute, Second
const d = new Date("2024-05-21T19:21:58");
// Tue May 21 2024 19:21:58 GMT+0800 (Taipei Standard Time)
// get year
d.getFullYear(); // 2024
// get month
d.getMonth() + 1; // 5
// get day
d.getDate(); // 21
// get hour
d.getHours(); // 19
// get minute
d.getMinutes(); // 21
// get second
d.getSeconds(); // 58
// get day of week
d.getDay(); // 2
Set
設定日期時間的 Year, Month, Day, Hour, Minute, Second
const d = new Date("2024-05-21T19:21:58");
// Tue May 21 2024 19:21:58 GMT+0800 (Taipei Standard Time)
// set year
d.setFullYear(2025);
// Wed May 21 2025 19:21:58 GMT+0800 (Taipei Standard Time)
// set month
d.setMonth(6);
// Sun Jul 21 2024 19:21:58 GMT+0800 (Taipei Standard Time)
// set day
d.setDate(22);
// Wed May 22 2024 19:21:58 GMT+0800 (Taipei Standard Time)
// set hour
d.setHours(22);
// Tue May 21 2024 22:21:58 GMT+0800 (Taipei Standard Time)
// set minute
d.setMinutes(30);
// Tue May 21 2024 19:30:58 GMT+0800 (Taipei Standard Time)
// set second
d.setSeconds(10);
// Tue May 21 2024 19:21:10 GMT+0800 (Taipei Standard Time)
Manipulate
日期時間的加減
const d = new Date("2024-05-21T19:21:58");
// Tue May 21 2024 19:21:58 GMT+0800 (Taipei Standard Time)
// add 1 year
d.setFullYear(d.getFullYear() + 1);
// Wed May 21 2025 19:21:58 GMT+0800 (Taipei Standard Time)
// add 1 month
d.setMonth(d.getMonth() + 1);
// Fri Jun 21 2024 19:21:58 GMT+0800 (Taipei Standard Time)
// add 1 day
d.setDate(d.getDate() + 1);
// Wed May 22 2024 19:21:58 GMT+0800 (Taipei Standard Time)
// add 1 hour
d.setHours(d.getHours() + 1);
// Tue May 21 2024 20:21:58 GMT+0800 (Taipei Standard Time)
// add 1 minute
d.setMinutes(d.getMinutes() + 1);
// Tue May 21 2024 19:22:58 GMT+0800 (Taipei Standard Time)
// add 1 second
d.setSeconds(d.getSeconds() + 1);
// Tue May 21 2024 19:21:59 GMT+0800 (Taipei Standard Time)
// subtract 1 day, other methods are similar
d.setDate(d.getDate() - 1);
// Mon May 20 2024 19:21:59 GMT+0800 (Taipei Standard Time)
Difference
兩個日期時間的差異
const d = new Date("2024-05-21T19:21:58");
// Tue May 21 2024 19:21:58 GMT+0800 (Taipei Standard Time)
// Time from now (days)
const now = new Date();
const diff = now - d;
// in minutes
Math.floor(diff / (1000 * 60));
// in hours
Math.floor(diff / (1000 * 60 * 60));
new Intl.RelativeTimeFormat().format(
Math.floor(diff / (1000 * 60 * 60 * 24)),
"day"
);
// in 30 days
Format
原生 Date 物件提供了一些方法來格式化日期時間：
const d = new Date("2024-05-21T19:21:58");
// Tue May 21 2024 19:21:58 GMT+0800 (Taipei Standard Time)
// format to ISO 8601
d.toISOString(); // 2024-05-21T11:21:58.000Z
// format to locale string
d.toLocaleString(); // 5/21/2024, 7:21:58 PM
// format to locale date string
d.toLocaleDateString("zh-TW", {
year: "numeric",
month: "long",
day: "numeric",
}); // 2024年5月21日
// format to locale time string
d.toLocaleDateString("en-US", {
year: "numeric",
month: "long",
day: "numeric",
}); // May 21, 2024
// YYYY-MM-DD
d.toISOString().split("T")[0]; // 2024-05-21