在預設的情況下,基於日期和時間的HTML input元素值是以UTC時區為基準,這很容易造成混淆而誤用。
舉例來說,有個使用者住在一個時區為GMT-8
的地方,然後這位使用者將2010-01-11
填寫至input[type="date"]
中,然而以下程式碼顯示給使用者的日期是2010-01-10
……
const element = document.querySelector("input[type='date']");
const date = element.valueAsDate;
console.log(`${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`);
還有就是這類input元素的value
、min
、max
屬性值都必須使用特定格式的字串才行,每次要用到的時候都要寫差不多的格式化字串的程式實在麻煩。
input-time-helper
input-time-helper
是筆者開發的函式庫,能夠以更直覺的方式存取HTML的時間日期元素值。
npmjs.com
使用方法
直接看以下程式碼:
import {
formatDateToDateString,
formatDateToDatetimeString,
formatDateToLocalISOString,
parseDateStringToDate,
parseDatetimeStringToDate,
getTimestamp,
setTimestampDate,
setTimestampDateTime,
} from "input-time-helper";
console.log(formatDateToDateString(new Date(2000, 1 - 1, 1))); // 2000-01-01
console.log(formatDateToDatetimeString(new Date(2000, 1 - 1, 1))); // 2000-01-01T00:00
console.log(formatDateToLocalISOString(new Date(2000, 1 - 1, 1))); // 2000-01-01T00:00+08:00
console.log(parseDateStringToDate("2000-01-01"));
console.log(parseDatetimeStringToDate("2000-01-01T00:00"));
const myInputDate = document.getElementById("myInputDate");
const myInputDatetimeLocal = document.getElementById("myInputDatetimeLocal");
console.log(getTimestamp(myInputDate));
console.log(getTimestamp(myInputDatetimeLocal));
setTimestampDate(myInputDate, 946656000000);
setTimestampDateTime(myInputDatetimeLocal, 946656000000);