我的 MUI DatePicker 已受控制，但未按预期工作

Question

我正在使用：

@mui/x-date-pickers: 6.18.2

每次我选择上面的日期时，我都试图控制我的 DatePicker，从现在起一周后，状态不会改变，但 datepicker UI 会更改为所选日期，我该如何修复它，以便 UI 日期将是注明日期？

import * as React from 'react';
import dayjs from 'dayjs';
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';

export default function DatePickerValue() {
const now = dayjs()
const weekFromNow = now.add(1,'week')
  const [value, setValue] = React.useState(now);

const handleChange = val => {
if(val > weekFromNow ){
alert('asdasd')
return
}
setValue(val)
}

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['DatePicker', 'DatePicker']}>
        <DatePicker label="Uncontrolled picker" defaultValue={dayjs('2022-04-17')} />
        <DatePicker
          label="Controlled picker"
          value={value}
          onChange={handleChange}
        />
      </DemoContainer>
    </LocalizationProvider>
  );
}

我正在尝试控制我的日期选择器。

Answer 1

看起来您正在尝试使用以下 if 条件验证用户选择的日期：

if(val > weekFromNow )

。

这有两个问题：

1. Dayjs 日期对象应使用 Dayjs 比较器函数（例如 isAfter()）进行比较，而不是使用大于 (>) 运算符。
2. 如果您的目标是防止用户选择无效日期，并且您的有效日期范围可以使用最小和/或最大日期来表示，那么您可能应该使用 DatePicker 内置验证。这可以防止用户选择无效日期，并避免使用 if 条件进行验证。尝试使用 maxDate DatePicker 属性和

   weekFromNow

   常量，而不是使用 if 条件。这应该可以防止日期选择器界面突出显示无效日期，因为用户无法选择它。