KeyboardDateTimePicker 材质 UI 非空验证答案

【问题标题】：KeyboardDateTimePicker Material UI Not null validationKeyboardDateTimePicker 材质 UI 非空验证
【发布时间】：2020-11-09 22:14:53
【问题描述】：

我已经实现了 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

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

【问题讨论】：

添加 props error 和 helperText 你可以创建一个类似 checkErrors=()=>{return this.props.StartDate?false:true} 的函数并使用这样的 props：error={checkErrors()} helperText={checkErrors():"Some error message":""}
@kapilpandey ：非常感谢您的解决方案。成功了！！
太棒了，我在下面发布解决方案。

标签： reactjs datepicker material-ui

【解决方案1】：

添加道具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>

【讨论】：