javascript - 我想在 JavaScript 中更改日期对象的时区

Question

我想更改 JavaScript 对象时区。我能够访问所需时区的时间
但日期对象仍然显示我的本地时区。

new Date()
output //Thu Nov 18 2021 16:30:23 GMT+0500 (Pakistan Standard Time)

new Date().toLocaleString("en-US", {timeZone: "America/Los_Angeles"})
output //'11/18/2021, 3:30:40 AM'

 new Date().toLocaleString("en-US", {timeZone: "America/Los_Angeles", timeZoneName: "short"})
output //'11/18/2021, 3:30:54 AM PST'

new Date(new Date().toLocaleString("en-US", {timeZone: "America/Los_Angeles", timeZoneName: "short"}))
output //Thu Nov 18 2021 16:37:35 GMT+0500 (Pakistan Standard Time)

Answer 1

JavaScript Date 对象不支持设置时区，你能做的最好的事情就是使用 Date.toLocaleString() 来格式化日期和时间。就像在您的代码中一样。
专用的日期/时间库，例如 luxon支持为 DateTime 设置时区对象非常简单。
我建议使用这些库之一来获取另一个时区的日期，下面显示了一个简单的例子(获取洛杉矶时区的日期时间):

const { DateTime } = luxon;

const localTime = DateTime.now();
const laTime = localTime.setZone("America/Los_Angeles")

console.log("Local Time:", localTime.toFormat('yyyy-MM-dd HH:mm'));
console.log("Los Angeles Time:", laTime.toFormat('yyyy-MM-dd HH:mm'));

console.log("Local Time (hour, minute):", localTime.hour, localTime.minute);
console.log("Los Angeles Time (hour, minute):", laTime.hour, laTime.minute);

.as-console-wrapper { max-height: 100% !important; top: 0; }

<script src="https://cdn.jsdelivr.net/npm/luxon@2.1.1/build/global/luxon.min.js"></script>

您可以尝试使用 native Date 对象执行以下操作，但是，这确实是一种黑客行为，并且不会总是给出准确的结果:

function getDateInTimezone(date, timeZone) {
    // Using a locale of 'sv' formats as an ISO date, e.g. yyyy-MM-dd HH:mm.
    const timeInTimeZone = date.toLocaleString('sv', { timeZone } );
    // Pass this to the Date constructor
    return new Date(timeInTimeZone);
}

const localTime = new Date();
const timeZoneList = ['Asia/Karachi', 'Europe/Paris','America/Los_Angeles'];

console.log(`Local Time: ${localTime.toLocaleTimeString()}`);
for(let timeZone of timeZoneList) {
    const dt = getDateInTimezone(localTime, timeZone);
    console.log(`Time (${timeZone}): ${dt.toLocaleTimeString()}`);
}

.as-console-wrapper { max-height: 100% !important; top: 0; }