reactjs 根据特定时区更改React状态

3zwjbxry  于 2023-01-04  发布在  React
关注(0)|答案(2)|浏览(136)

假设一家本地面包店有一个网站,上面显示了它的营业时间沿着带有一个“营业”或“关门”的标签,这个标签需要根据营业时间而改变。
我想到的解决方案是有两种状态:
1.查看工作时间状态(开放/关闭)
1.当前时间
对于第二个,我使用了一个解决方案,我发现在线时钟:

const [date, setDate] = useState(new Date());

useEffect(() => {
    let timer = setInterval(() => setDate(newDate()), 1000);
    return function cleanup() {
      clearInterval(timer);
    };
  });

对于更改打开/关闭状态,我想到使用这个处理程序:

const handleStatus = () => {
    let openHour = new Date();
    let closeHour = new Date();
    openHour.setHours(9, 0, 0);
    closeHour.setHours(18, 30, 0);
    if (date > openHour) {
      //CLOSED
    } else {
     //OPEN
    }
  };

这种方法的问题是它只适用于我所在的州,而不适用于其他时区。目标是只在特定时区保持州的变化,这样位于纽约市的用户在晚上9点会看到面包店仍然营业,因为洛杉矶是下午6点,而它只在下午6:30关闭。我该如何解决这个问题?如果有任何其他方法,请告诉我!

t30tvxxf

t30tvxxf1#

也许你应该尝试使用浏览器的时区而不是本地设备的时区。你可以用Intl.DateTimeFormat().resolvedOptions().timeZone方法获得浏览器的时区。
您可以使用此方法根据浏览器的时区更新工作时间状态:

const handleStatus = () => {
  const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;

  // Set the open and close hours based on the timezone
  let openHour, closeHour;
  if (timezone === 'America/Los_Angeles') {
    openHour = new Date();
    openHour.setHours(9, 0, 0);
    closeHour = new Date();
    closeHour.setHours(18, 30, 0);
  } else {
    // Set the open and close hours for other timezones here
  }

  if (date > openHour && date < closeHour) {
    // The bakery is open
  } else {
    // The bakery is closed
  }
};

这样,工作时间状态将始终基于浏览器的时区,而与本地设备的时区无关。
或者,您可以使用服务器端解决方案来获取浏览器时区的正确时间。这将涉及到调用服务器端API来获取浏览器时区的当前时间,然后使用该时间来更新工作时间状态。这种方法会更准确,因为它考虑了夏令时和其他可能影响本地设备时间的因素。但是,这需要设置服务器并调用API,如果只需要在静态网站上显示工作时间状态,则可能不需要这样做。
我希望这对你有所帮助。

myzjeezk

myzjeezk2#

目前JavaScript标准库中还没有ZonedDateTime的概念,在它出现之前,可以手工计算时区偏移量,对UTC中的Date对象进行操作。

// Calculate timezone offset of America/Los_Angeles
utcDate = new Date();
utcDate.setHours(0, 0, 0, 0);
strDateLA = utcDate.toLocaleString("en-US", {
    timeZone: "America/Los_Angeles",
});
offset = (new Date(strDateLA) - utcDate) / (1000 * 60 * 60);
console.log(offset);

现在已经有了时区偏移量,可以将开始和结束时间转换为UTC日期时间。

openHourUTC = new Date();
openHourUTC.setHours(9, 0, 0, 0);
// Opening hour in UTC
openHourUTC = openHourUTC - offset;

closeHourUTC = new Date();
closeHourUTC.setHours(18, 30, 0, 0);
// Closing hour in UTC
closeHourUTC = closeHourUTC - offset;

注意:如果时区偏移为负,例如-8,则上面的代码片段计算openHourUTC = openHourUTC - (-8) =〉openHourUTC = openHourUTC + 8

现在,您可以执行以下操作:

if (date >= openHourUTC && date < closeHourUTC) {
    // OPEN
} else {
    // CLOSED
}

相关问题