reactjs - KeyboardDateTimePicker Material UI 非空验证

Question

我已经实现了KeyboardDateTimePicker。我无法验证它是否为 empty 或 null 值？我尝试了一些验证方法，但它不起作用。

代码:

<MuiPickersUtilsProvider utils={DateFnsUtils}>
    <KeyboardDateTimePicker
    required={true}
    format="dd/MM/yyyy HH:mm"
    value={this.props.StartDate}
    placeholder="dd/mm/yyyy hh:mm"
    onChange={(event) => this.props.handleDateTime(event)}
    />
</MuiPickersUtilsProvider>

我尝试在表单控件中放置 required, validated=true ，但它不起作用。

这里没有找到任何关键字: https://material-ui-pickers.dev/api/KeyboardDatePicker

关于日期时间选择器: https://material-ui-pickers.dev/demo/datetime-picker

如果有人遇到类似问题，请提出建议。

Answer 1

添加 Prop error和helperText

您可以创建一个函数 checkErrors=()=>this.props.StartDate?false:true 并使用 props

error={checkErrors()}
helperText={checkErrors():"Some error message":""}

您的代码可能如下所示:

<MuiPickersUtilsProvider utils={DateFnsUtils}>
                    <KeyboardDateTimePicker
                      required={true}
                      format="dd/MM/yyyy HH:mm"
                      value={this.props.StartDate
                      }
                      placeholder="dd/mm/yyyy hh:mm"
                      onChange={(event) => this.props.handleDateTime(event)}
                      error={this.props.StartDate?false:true}
                      helperText={this.props.StartDate?"Some error message":""}
                    />
</MuiPickersUtilsProvider>