material-ui 在@mui/lab V5日期选择器中支持最小日期消息和最大日期消息

fdx2calv  于 2022-10-29  发布在  其他
关注(0)|答案(2)|浏览(128)
  • 我已经搜索了此存储库的issues,并认为这不是重复的。

摘要💡

在以前的DatePicker API(在最新的MUI中)https://material-ui-pickers.dev/api/DatePicker中,当发生此类错误时,存在用于自定义最小和最大日期消息的属性。
此API似乎已从新的DatePickers中消失,请参阅https://next.material-ui-pickers.dev/api/DatePicker
这是非常方便的,而且我自己似乎不能反映这种行为,因为“onError”回调的行为是通用的,它只在验证错误发生变化时才触发。
到目前为止,我尝试在onError回调期间获取错误消息,存储它,并相应地显示错误,然后在onChange处理程序期间重置它们。
问题是,在这样的用例中:

  • 日期正确
  • 如果将日期更改为大于最大值的值=〉,则显示错误
  • 我将日期更改为更大的值,仍然大于max =〉错误未显示:触发了onChange,但未触发onError,因为错误未更改。

onError处理程序的非系统性和不对称性使我很难找到一种适合所有情况的处理程序,以便在错误发生时显示和清除错误。
任何帮助都将不胜感激(无论是另一个手工的变通办法或功能本身!)。
示例🌈
如前所述,我似乎无法通过在onError处理程序中显示错误并在onChange处理程序中重置它们来处理此类用例。有时错误与之前没有任何不同,因此onError不会被触发,但onChange会被触发,错误消息被重置。我无法独自访问日期选择器的内部错误状态,以与其同步,并在我的应用中保持一致的行为。
(see示例)

动机🔦

minDateMessage和maxDateMessage非常方便,使我们能够避免手动解决方案,例如我正在尝试实现的解决方案。错误显示清晰且一致。

brc7rcf0

brc7rcf01#

感谢您的反馈。
拾取器现已从@material-ui/lab发布。新文档可在https://next.material-ui.com/components/date-picker/中找到。
不需要minDateMessagemaxDateMessage道具,因为两者都可以通过TextFieldhelperText来实现,例如

<DatePicker
  minDate={new Date('2020-01-01')}
  maxDate={new Date('2021-01-01')}
  label="Basic example"
  value={new Date('2022-01-01')}
  onChange={(newValue) => {
    setValue(newValue);
  }}
  renderInput={(params) => <TextField helperText="error" {...params} />}
/>

尽管我们肯定缺少错误处理的文档。

mcvgt66p

mcvgt66p2#

谢谢@eps1lon的快速回复!我不知道helperText,它比字段下的外部spanli元素要优雅得多。
如果将来有人在这里结束,我最终实现了错误处理:

  • 包含可选错误消息的变量
  • 一个包含布尔值的变量,该布尔值表示我是否应该显示错误消息

我在onError处理程序中将错误消息和boolean设置为true,然后仅当onError回调提供的新错误消息为null时将display boolean设置为false。这样,我就可以根据需要显示错误,并控制重置行为。(当onError给出一个空的原因时,或者当我在我的页面中通过其他方式设置一个有效的日期时,我会重置它们,例如,单击上个月日期的按钮,或者其他东西。)
至于模仿minDateMessagemaxDateMessage的原始样式,TextFieldhelperText确实是一条可行之路!我用以下代码将其样式化为红色(此处为TypeScript,但JS看起来应该大致相同):

private renderDatePickerTextInput(errorText: string) {
        const useStyles = makeStyles(() => ({
            textField: {
                "& p": {
                    color: "red",
                },
            },
        }));
        const classes = useStyles();

        return (props: any) => (
            <TextField
                {...props}
                classes={{root: classes.textField}}
                helperText={errorText}
            />
        );
    }

errorText可以为空或包含一条错误消息,这将有条件地显示错误。
自定义TextField可用于:

<DesktopDatePicker
    ...
    renderInput={this.renderDatePickerTextInput(errorText)}
/>

相关问题