在現代跨時區和跨平台的網頁應用程式中,確保日期和時間的統一格式至關重要。本文將介紹如何使用 ISO 8601 標準來設計和實現全球統一的時間格式,在前端與後端應用程式中確保一致性和可靠性。
隨著全球化的發展,跨時區和跨平台的應用程式越來越普遍。日期和時間的格式化和處理成為了開發中不可忽視的重要問題。ISO 8601 是一個被廣泛接受的國際標準,它提供了一種統一的日期和時間表示方法,能夠有效解決時區和格式帶來的混淆。
如何確保前端和後端在處理日期時間時具有一致的標準,從而減少因為不同時區或格式而引起的混淆和錯誤?
這個問題的核心在於:
2024-09-18T09:19:43+08:00
)在前端,我們通常使用 JavaScript 來處理日期和時間。為了確保日期時間格式的一致性,我們應該將日期時間格式化為 ISO 8601 字串。JavaScript 提供了內建的方法來實現這一點:
// 取得時間字串
const nowLocal = new Date();
console.log(nowLocal); // Wed Sep 18 2024 09:19:43 GMT+0800 (台北標準時間)
const nowUTC = nowLocal.toISOString();
console.log(nowUTC); // 2024-09-18T01:19:43.124Z
// 恢復時間字串
const pastLocal = new Date('2024-09-18T01:19:43.124Z')
console.log(pastLocal); // Wed Sep 18 2024 09:19:43 GMT+0800 (台北標準時間)
const pastUTC = pastLocal.toISOString();
console.log(pastUTC); // 2024-09-18T01:19:43.124Z
前端送出 API 範例:
當要送出『使用者電腦時區的 0 點 0 分』時,則可以直接使用 toISOString 轉換:
const sendData = () => {
const currentDate = new Date(); // Wed Sep 18 2024 00:00:00 GMT+0800 (台北標準時間)
const isoDateTimeString = currentDate.toISOString(); // 2024-09-17T16:00:00.000Z
const requestData = { startAt: isoDateTimeString };
fetch('/api/data', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(requestData)
})
}
若是要送出『目標(設備)時區的 0 點 0 分』時,則需要指定時區:
const sendData = () => {
const targetTimeZoneDateTime = dayjs.tz('2024-09-18', 'Asia/Taipei').format(); // 2024-09-18T00:00:00+08:00
const currentDate = new Date(targetTimeZoneDateTime); // Wed Sep 18 2024 00:00:00 GMT+0800 (台北標準時間)
const isoDateTimeString = currentDate.toISOString(); // 2024-09-17T16:00:00.000Z
const requestData = { startAt: isoDateTimeString };
fetch('/api/data', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(requestData)
})
}
Joi.object({
startAt: Joi.date().iso().raw(),
});