FluentUI React日期选择器跨时区日期偏移问题求助

问题描述 #

使用FluentUI（React.js+TypeScript）的DatePicker组件时，设置value为new Date("2023-05-23T00:00:00Z")，在山地时区等UTC偏移较大的区域访问时，组件显示日期变为22/05/2023，比预期日期少一天。这是因为浏览器会自动将UTC日期转换为本地时区时间，导致格式化时取到了本地时区的前一天日期。

框架内解决方案 #

方案1：直接在formatDate中使用UTC方法格式化 #

修改DatePicker的formatDate属性，直接通过UTC相关方法获取年、月、日分量，避免依赖本地时区的日期转换：

<DatePicker
  placeholder="Enter Date"
  allowTextInput={false}
  id="d"
  label="Start"
  isRequired={true}
  value={condition ? new Date("2023-05-23T00:00:00Z") : null}
  onSelectDate={(value) => this._handleDatePickerRangeInput("d", value, s, "s")}
  formatDate={(date: Date): string => {
    // 基于UTC日期分量格式化，不受本地时区影响
    const year = date.getUTCFullYear();
    const month = String(date.getUTCMonth() + 1).padStart(2, '0'); // 月份从0开始，需+1后补零
    const day = String(date.getUTCDate()).padStart(2, '0');
    return `${day}/${month}/${year}`;
  }}
/>

方案2：复用格式化逻辑（修改getDateFormat方法） #

如果需要复用日期格式化逻辑，调整getDateFormat方法，让它接收Date对象并使用UTC方法处理：

// 调整后的getDateFormat方法
getDateFormat(date: Date): string {
  const year = date.getUTCFullYear();
  const month = String(date.getUTCMonth() + 1).padStart(2, '0');
  const day = String(date.getUTCDate()).padStart(2, '0');
  return `${day}/${month}/${year}`;
}

// DatePicker组件的formatDate调用修改为：
<DatePicker
  // 其他属性保持不变
  formatDate={(date: Date): string => this.getDateFormat(date)}
/>

原理说明 #

原代码中date.toString()会将UTC日期转换为本地时区的字符串，比如山地时区（UTC-6）下，2023-05-23T00:00:00Z会被转换为本地时间2023-05-22T18:00:00-06:00，导致格式化时取到前一天的日期。改用getUTCFullYear、getUTCMonth、getUTCDate方法可以直接获取UTC标准下的日期分量，确保显示日期与设置的UTC日期一致。

内容的提问来源于stack exchange，提问作者Suraj Yadav