Clear redux form field (DatePicker) onclick 'x'

Question

Hello I am using DatePicker from redux-form-material-ui and I can't clear the field - there is no way to do that withing this component which i described here: https://github.com/erikras/redux-form-material-ui/issues/262 Therefore I want to add 'x' button on the field on the right and onclick it should clear the field... How i can do it? How I can access the field in the method?

<Field
   name="dateOfBirth"
   type="text"
   component={DatePicker}
   className={css.fullWidth}
   fullWidth
   formatDate={formatDate}
/>

its better to use DatetimeRangePicker from 'react-bootstrap-datetimerangepicker' ,where you can easily handle clear using states. — Harikrishnan
But I don't want date ranges, just one date to be selected, And want it to work perfectly with redux forms. — jake-ferguson

Tadas Antanavicius Tadas Antanavicius · Accepted Answer · 2018-07-13T22:00:01

It appears that redux-form-material-ui doesn't cleanly expose the ability to manipulate the field's value. But, it does suggest a way to dig into the children via refs.

In your case, it would look something like:

handleClick() {
    this.refs.dobField          // the Field
      .getRenderedComponent()   // on Field, returns ReduxFormMaterialUIDatePicker
      .getRenderedComponent()   // on ReduxFormMaterialUIDatePicker, returns DatePicker
      .setState({ date: null}); // on DatePicker
}

Here's the DatePicker source code from the material-ui library (it appears that redux-form-material-ui is using an 0.x release, not 1.x).

Assuming you have:

render() {
  return (
    <form>
      ...
      <Field name="dateOfBirth"
             type="text"
             component={DatePicker}
             className={css.fullWidth}
             fullWidth
             formatDate={formatDate}
             withRef // enable the option
             ref="dobField" // name of ref; redux-form-material-ui makes it accessible via this.refs.dobField
/>
      ...
    </form>
  )
}

Clear redux form field (DatePicker) onclick 'x'

1 Answers