Question

我正在尝试在日期选择器上显示验证错误消息，例如我们如何使用errorText和errorStyle道具为TextField执行，但验证错误消息对DatePicker不起作用。

我正在使用material-ui版本＆＃34; ^ 0.18.7＆＃34;。

请在下面找到完整功能。我不确定如何实现这一点。我也明白errorText和errorStyle不是DatePicker的有效道具。认为它适用于datepicker，但事实并非如此。有没有办法实现这一目标。

import DatePicker from 'material-ui/DatePicker';

constructor(props){
   super(props)
   const dateYesterday = new Date();
   dateYesterday.setDate(dateYesterday.getDate() - 1);
   this.state={
      dob: null,
      dobError: '',
      dateYesterday: dateYesterday
   }
   this.changeDateOfBirth = this.changeDateOfBirth.bind(this)
}

changeDateOfBirth = (evt, date) => {
if(date == null || date == undefined){
  this.setState({
    dobError: 'Please select your date of birth'
  });
}else{
  this.setState({
    dobError: '',
    dob: date
  });
}
}
const errorStyle = {
    display: 'table'
}

<DatePicker 
    dialogContainerStyle={{position: 'absolute'}} 
    errorText={this.state.dobError} 
    errorStyle={errorStyle} 
    inputStyle={myTheme.inputStyleText} 
    underlineStyle={myTheme.underlineStyle} 
    underlineFocusStyle={myTheme.underlineStyle} 
    floatingLabelStyle={myTheme.floatingLabelStyle} 
    floatingLabelText="Date Of Birth" 
    hintText="Select Date Of Birth" 
    container="inline" 
    locale="en-US" 
    firstDayOfWeek={0} 
    autoOk={true} 
    value={this.state.dob} 
    onChange={this.changeDateOfBirth} 
    defaultDate={this.state.dateYesterday}
 >
 </DatePicker>

请建议。

Answer 1

DatePicker传播到子元素，因此您实际上可以使用errorText元素中的errorStyle和TextField道具。例如，我在“^ 0.18.7”中测试了以下DatePicker，并确认它显示为红色错误消息：

<DatePicker hintText="Portrait Dialog" errorText="This is an error message." />

您应该知道onChange中的DatePicker回调仅在选择日期时触发，因此date参数永远不会为null或未定义。换句话说，您永远不会进入以下if声明：

if(date == null || date == undefined){
  this.setState({
    dobError: 'Please select your date of birth'
  });
}

如果你想检查用户没有设置任何日期的情况，考虑只检查你的DOB是否为空（我省略了不相关的道具以保持简短）：

<DatePicker 
    errorText={this.state.dob ? {} : this.state.dobError} 
    errorStyle={this.state.dob ? {} : errorStyle} 
 >

Material-UI Datepicker无法显示错误/所需消息

1 个答案: