如何在React中解析带时区扩展的ISO 8601格式ZonedDateTime字符串？

问题原因 #

parseZonedDateTime的compatible模式虽宣称支持ISO 8601扩展格式，但对[Europe/Paris]这类方括号包裹的时区标识符格式兼容性不足，无法直接解析。

解决方法 #

方法1：预处理字符串拆分信息后组合解析 #

先将原字符串拆分为带偏移量的日期时间部分和时区标识符，分别处理后再组合：

import { parseZonedDateTime, ZonedDateTime, TimeZone } from '@internationalized/date';

const dateStr = "2023-04-07T08:58:08+02:00[Europe/Paris]";
// 拆分日期时间与时区部分
const [dateTimePart, tzPart] = dateStr.split('[');
const timeZoneId = tzPart.replace(']', '');

// 先解析带偏移的日期时间，再转换到目标时区
const tempZdt = parseZonedDateTime(dateTimePart, 'compatible');
const targetZdt = tempZdt.withTimeZone(new TimeZone(timeZoneId));

方法2：手动构造ZonedDateTime实例 #

直接提取字符串中的日期、时间、时区字段，手动构建对象：

import { ZonedDateTime, TimeZone, Calendar } from '@internationalized/date';

const dateStr = "2023-04-07T08:58:08+02:00[Europe/Paris]";
// 提取年、月、日
const [year, month, day] = dateStr.split('T')[0].split('-').map(Number);
// 提取时、分、秒
const [hour, minute, second] = dateStr.split('T')[1].split('+')[0].split(':').map(Number);
// 提取时区标识符
const timeZoneId = dateStr.match(/\[([^\]]+)\]/)[1];

const zdt = new ZonedDateTime(
  year,
  month,
  day,
  hour,
  minute,
  second,
  0, // 毫秒值
  new TimeZone(timeZoneId),
  new Calendar('gregory')
);

方法3：尝试切换解析模式（有限适用） #

可尝试使用'basic'模式解析，但该模式对格式要求更严格，且仍大概率无法兼容方括号时区格式，建议优先使用前两种方法。

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