it-roy-ru.com

Как внедрить валидацию / ограничение в response-datepicker

Я пытаюсь реализовать ограничение или проверку в компоненте Reaction-DatePicker . Я использую избыточную форму для проверки и нормализации (для реализации ограничений)

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

Вопрос: я заметил, что ни нормализующая функция, ни проверочные функции в редукт-форме не вызываются, когда мы пытаемся ввести что-то в поле

date picker field

хотя это значение не передается при отправке формы, но мне нужно показать некоторую ошибку проверки или запретить пользователю вводить недопустимые символы.

Я сделал оболочку для компонента выбора даты и использовал его в своей форме через поле приставки

мой компонент выбора даты: -

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>
    );

поле формы редукса: -

<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)")}
/>

моя нормализующая функция: -

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

response-datepicker предоставляет свойство onChangeRaw для получения необработанного (типизированного) значения внутри datePicker. Чтобы ограничить или проверить поле ввода datepicker, нам нужно необработанное значение, которое недоступно в событии onChange компонента datepicker. 

например, если мы наблюдаем событие onChange: -  enter image description here

Возвращает моментальный объект.

Для получения необработанного значения мы используем onChangeRaw

Необработанное значение получается просто из e.target.value . В моем случае я просто запрещаю пользователю вводить что-либо в поле ввода datepicker с помощью простой функции: -

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

Мой компонент выбора даты: -

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

Это решило мою проблему. Надеюсь, это полезно :)

2
Ayesha Mundu