javascript 如何在 react-datepicker 中实现验证/限制
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/47593345/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to implement validation/restriction in react-datepicker
提问by Ayesha Mundu
I am trying to implement restriction or validation in a react-datepickercomponent. I am using redux-form for validation and normalization(to implement restriction)
我正在尝试在react-datepicker组件中实现限制或验证。我正在使用 redux-form 进行验证和规范化（以实现限制）
https://redux-form.com/6.0.0-rc.1/examples/normalizing/
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
问题：我观察到当我们尝试在字段中输入内容时，redux-form 的规范化函数和验证函数都没有被调用
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
我为日期选择器组件制作了一个包装器，并通过 redux 字段在我的表单中使用它
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;
}
采纳答案by Ayesha Mundu
react-datepicker provides onChangeRawproperty 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.
react-datepicker 提供onChangeRaw属性来获取 datePicker 中的原始（类型化）值。为了限制或验证日期选择器输入字段，我们需要在日期选择器组件的 onChange 事件中不可用的原始值。
for instance if we observe the onChange event :-
例如，如果我们观察 onChange 事件：-
It returns a moment object.
它返回一个矩对象。
In order to get raw value we use onChangeRaw
为了获得原始值，我们使用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:-
原始值简单地从 e.target.value 获得。就我而言，我只是通过一个简单的功能限制用户在日期选择器输入字段中输入任何内容：-
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 :)
这解决了我的问题。希望它有用:)
