如何通过React Hook Form从MUI X Date Picker获取指定格式日期

你遇到的问题是MUI X DatePicker默认返回带时区的日期对象，React Hook Form会自动将其序列化为ISO格式字符串，需要手动处理日期格式转换才能得到dd-mm-yyyy或yyyy-mm-dd格式的结果。以下是具体配置方案：

核心修改点 #

• 利用已引入的Dayjs（AdapterDayjs依赖）将日期对象格式化为目标字符串格式
• 修正Controller的拼写错误（defautValue → defaultValue）

修改后的完整代码 #

�机器人计划 Highway仔 during-G冠 partially常用CheckONE�`import dayjs from 'dayjs';`

<Controller 
  name="dob" 
  control={control} 
  defaultValue={null}
  render={({ 
            field: { onChange, value },
            fieldState: { error },
          }) => (
            <LocalizationProvider
              dateAdapter={AdapterDayjs}
              adapterLocale="pt-br"
            >
              <DatePicker
                label="Data"
                format="DD/MM/YYYY"
                value={value ? dayjs(value) : null}
                onChange={(newDate) => {
                  // 按需替换格式：DD-MM-YYYY 或 YYYY-MM-DD
                  const formattedDate = newDate ? newDate.format('DD-MM-YYYY') : null;
                  onChange(formattedDate);
                }}
                slotProps={{
                  textField: {
                    error: !!error,
                    helperText: error?.message,
                  },
                }}
              />
            </LocalizationProvider>
          )}
/>

关键说明 #

1. 格式转换逻辑：在DatePicker的onChange中，将选中的Dayjs日期对象通过format方法转为目标字符串格式，再传给React Hook Form的onChange，这样表单字段dob就会存储你需要的格式值。
2. 值的兼容处理：value属性需要判断是否为null，避免非日期值传入Dayjs导致报错。
3. 拼写修正：原代码中defautValue是拼写错误，需改为defaultValue，否则默认值不会生效。

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