Material-UI Pickers – Make empty date (onblur) trigger error

Viewed 997

Problem: I'm using material-ui-pickers and cannot figure out how to trigger/initiate an error when user removes focus / onBlur and date field is empty.

I've tried to alter the colors of text and underline to error color(red), however the screen readers / a11y will not register the error. This means that it must trigger the "internal" error system of date picker.

1 Answers

@material-ui-pickers inherits the props from Material-UI TextField , you will notice that error is boolean.

In order to create an error message you will need to satisfy two props, error and helperText.

You did not provide an example but it should be something like that:

     <DatePicker
      required
      id="dob"
      label="Date of Birth"
      format={"DD/MM/YYYY"}
      value={this.state.dob}
      className={classes.textField}
      onChange={this.handleDateChange}
      error={!this.state.dob}
      helperText={!this.state.dob && "Error message here"}
    />
Related