如何在 react-datepicker 中实现验证/限制答案

【问题标题】：How to implement validation/restriction in react-datepicker如何在 react-datepicker 中实现验证/限制
【发布时间】：2017-12-01 12:23:54
【问题描述】：

我正在尝试在 react-datepicker 组件中实现限制或验证。我正在使用 redux-form 进行验证和规范化（实现限制）

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

问题：我观察到当我们尝试在字段中输入内容时，redux-form 的规范化函数和验证函数都没有被调用

虽然我们提交表单时未提交此值，但我需要显示一些验证错误或限制用户输入无效字符。

我为日期选择器组件制作了一个包装器，并通过 redux 字段在我的表单中使用它

我的日期选择器组件：-

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 表单域：-

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

【问题讨论】：

标签： javascript reactjs redux redux-form react-datepicker

【解决方案1】：

react-datepicker 提供 onChangeRaw 属性来获取 datePicker 中的原始（输入）值。为了限制或验证 datepicker 输入字段，我们需要在 datepicker 组件的 onChange 事件中不可用的原始值。

例如，如果我们观察 onChange 事件：-

它返回一个时刻对象。

为了获得原始值，我们使用 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}
 .....
/>

这解决了我的问题。希望有用:)

【讨论】：

与其不必要地访问 DOM，只需将提供的合成事件与 date 一起使用，它是 currentTarget 属性。 handleChangeRaw = (date) => { date.currentTarget.value =moment(this.props.input.value).format("DD/MM/YYYY"); }