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

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

KeyboardDateTimePicker Material UI 非空验证

KeyboardDateTimePicker Material UI Not null validation

datepicker

reactjs

material-ui