How to implement validation/restriction in react-datepicker

Question

I am trying to implement restriction or validation in a react-datepicker component. I am using redux-form for validation and normalization(to implement restriction)

https://redux-form.com/6.0.0-rc.1/examples/normalizing/

Question : I have observed that neither normalizing function nor validation functions of redux-form is called when we try to enter something in the field

although this value is not submitted when we submit the form but i need to show some validation error or restrict user from typing invalid characters.

I made a wrapper for the date picker component and used it in my form through redux field

my date picker component :-

return (
      <div className={"render-date-picker "}>
        <div className="input-error-wrapper">
          {(input.value) ? <label> {placeholder} </label> : ''}
          <DatePicker className="input form-flow" {...input}
            placeholderText={placeholder}
            selected={input.value ? moment(input.value) : null}
            maxDate={maxDate || null}
            minDate={minDate || null}
            dateFormat={isTimePicker ? "LLL" : "DD/MM/YYYY"}
            showYearDropdown
            showMonthDropdown
            disabledKeyboardNavigation
          />

          {touched && error && <span className="error-msg">{t(error)}</span>}
          <span className="bar" style={{ 'display': this.state.is_focus ? 'block' : 'none' }} ></span>
        </div>
      </div>
    );

redux form field :-

<Field
 name="date_of_birth"
 type="text"
 className="input form-flow extra-padding-datepicker"
 component={RenderDatePicker}
 maxDate={moment().subtract(18, "years")}
 validate={[required, dateOfBirth]}
 normalize={isValidDateFormat}
 placeholder={t("DOB (DD/MM/YYYY)")}
/>

my normalizing function:-

export const isValidDateFormat = (value, previousValue) => {
    if (value == null || !value.isValid()) {
        return previousValue;
    }
    return value;
}

score 7 · Accepted Answer · edited Jun 19 '18 at 18:16

react-datepicker provides onChangeRaw property to get raw (typed) value inside the datePicker. In order to restrict or validate the datepicker input field we need the raw value which is not available on onChange event of the datepicker component.

for instance if we observe the onChange event :-

It returns a moment object.

In order to get raw value we use onChangeRaw

The raw value is obtained simply from e.target.value. In my case I simply restrict the user from typing anything in the datepicker input field by a simple function:-

handleChangeRaw = (date) => {
    let s=document.getElementById(date_picker_id)
    s.value =moment(this.props.input.value).format("DD/MM/YYYY");
  }

My datepicker component :-

<DatePicker
 .....
 disabledKeyboardNavigation
 onChangeRaw={(e)=>this.handleChangeRaw(e)}
 id={date_picker_id}
 .....
/>

This solved my problem. Hope it is useful :)

Rather than access the DOM unnecessarily, Just use the provided synthetic event with ````date```` and it's currentTarget property. ````handleChangeRaw = (date) => { date.currentTarget.value =moment(this.props.input.value).format("DD/MM/YYYY"); }```` — KyleM, Sep 18 '18 at 15:51

How to implement validation/restriction in react-datepicker

1 Answers1