DayJs报错TypeError: date.isBefore is not a function问题求助

你遇到的isBefore错误，本质是MUI DatePicker期望接收dayjs对象作为值，但你传入的是字符串格式的日期。虽然你没直接调用isBefore，但DatePicker内部会对传入的值做日期校验/比较，字符串没有这个方法，所以抛出错误。

核心问题点 #

• Controller的value传的是passengerSelected?.Date_of_Birth（"YYYY-MM-DD"字符串），而DatePicker需要的是dayjs实例
• 直接展开{...field}会把字符串格式的field.value传给DatePicker，触发内部方法调用失败

解决方案 #

1. 转换默认值为dayjs对象
   把传入的字符串日期转成dayjs实例，确保DatePicker能正确识别
2. 拆分字段传递，避免直接传字符串value
   只把field的name、onBlur等属性传给DatePicker，单独处理value和onChange
3. 统一日期格式处理
   在onChange中把dayjs对象转成字符串存入React Hook Form

修改后的代码示例 #

<Controller
  name="Date_of_Birth"
  control={control}
  // 把字符串默认值转成dayjs对象，无值则传null
  defaultValue={passengerSelected?.Date_of_Birth ? dayjs(passengerSelected.Date_of_Birth) : null}
  render={({ field: { name, onBlur, onChange } }) => (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DatePicker
        label="Date of Birth"
        sx={{
          width: { lg: "46%", md: "46%", sm: "100%", xs: "100%" },
          mt: { lg: "-0.7rem", md: "-0.7rem" },
        }}
        // DatePicker的value用dayjs实例，无值则为null
        value={passengerSelected?.Date_of_Birth ? dayjs(passengerSelected.Date_of_Birth) : null}
        onChange={(newValue) => {
          // 把dayjs对象转成字符串传给React Hook Form
          onChange(newValue ? newValue.format("YYYY-MM-DD") : null);
        }}
        onBlur={onBlur}
        name={name}
        renderInput={(params) => (
          <TextField
            id="date_of_birth"
            variant="outlined"
            type="date"
            sx={{
              "& .MuiInputBase-input": {
                padding: "14px 14px",
                "::placeholder": "Date of Birth",
              },
              width: "100%",
            }}
            {...params}
          />
        )}
      />
    </LocalizationProvider>
  )}
/>

额外注意事项 #

• 确保已经正确安装并导入dayjs和@mui/x-date-pickers/AdapterDayjs
• 如果passengerSelected.Date_of_Birth可能为空，要做兜底处理，避免传入无效值导致报错

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