React DatePicker设置用户时区初始值时触发RangeError错误

错误原因 #

你遇到的RangeError: Format string contains an unescaped latin alphabet character 'n'有两个核心原因：

1. 类型不匹配：formatInTimeZone返回的是格式化后的字符串，但react-hook-form的Controller和react-datetime-picker都期望Date类型的值（而非字符串）。
2. 参数缺失：formatInTimeZone需要三个必填参数（日期、时区、格式字符串），你只传了前两个，导致内部格式解析逻辑出错。

解决方案 #

不需要用formatInTimeZone生成默认值，直接基于用户时区创建对应的Date对象即可，推荐用date-fns-tz的utcToZonedTime（将UTC时间转换为指定时区的时间）或zonedTimeToUtc（将指定时区的时间字符串转换为UTC Date对象）。

修改后的完整代码 #

import { Controller, useForm } from 'react-hook-form'
import DateTimePicker from 'react-datetime-picker'
import 'react-datetime-picker/dist/DateTimePicker.css'
import 'react-calendar/dist/Calendar.css'
import { utcToZonedTime } from 'date-fns-tz'

const Dates = () => {
    // 假设user是从API获取的用户数据，包含timezone字段
    const user = { timezone: 'Asia/Shanghai' }; 
    // 生成用户时区对应的当前时间作为默认值
    const userTimezoneDefaultDate = utcToZonedTime(new Date(), user.timezone);

    // 解构useForm的control（原代码遗漏了这一步）
    const { control } = useForm();

    return (
        <div>
            <Controller
                control={control}
                name='end_time'
                defaultValue={userTimezoneDefaultDate}
                render={({ field: { onChange, value } }) => (
                    <DateTimePicker
                        onChange={onChange}
                        value={value ?? null}
                        format="dd-MM-y h:mm a"
                    />
                )}
            />
        </div>
    )
}

export default Dates

额外场景：API返回用户时区的时间字符串 #

如果API返回的是用户时区的时间字符串（比如"2024-05-20 14:30"），用zonedTimeToUtc转换为Date对象：

import { zonedTimeToUtc } from 'date-fns-tz';

// 示例：API返回的用户时区时间字符串
const apiUserTimeStr = "2024-05-20 14:30";
const userTimezoneDate = zonedTimeToUtc(apiUserTimeStr, user.timezone);

将userTimezoneDate赋值给defaultValue即可。

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