在預設的情況下,基於日期和時間的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元素的valueminmax屬性值都必須使用特定格式的字串才行,每次要用到的時候都要寫差不多的格式化字串的程式實在麻煩。

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);

在網頁瀏覽器上使用input-time-helper

網頁原始碼

展示頁面