在 react-datepicker 中使用带有日期范围的 React-Redux 表单字段
Using React-Redux Form Fields with Date Range in react-datepicker
来自反应日期选择器:
https://github.com/Hacker0x01/react-datepicker/blob/master/docs-site/src/examples/date_range.jsx#L4
为此:
datePicker.js
const { fields, input , meta } = this.props;
const { touched, error, warning } = meta || {}
...
return (
<DatePicker
selected={this.state.startDate ? this.state.startDate : undefined}
selectsStart
startDate={this.state.startDate}
endDate={this.state.endDate}
onChange={this.handleChangeStart}
dateFormat="DD/MM/YYYY"
/>
<span> to </span>
<DatePicker
selected={this.state.endDate ? this.state.endDate : undefined}
selectsEnd
startDate={this.state.startDate}
endDate={this.state.endDate}
onChange={this.handleChangeEnd}
dateFormat="DD/MM/YYYY"
/>
{touched && ( /* << how to declare the meta respectively ? */
(error && <span>ERR</span>)||
(warning && <span>WARN</span>)
)}
...
)
由于有2个字段输入,我决定在redux形式中使用"Fields",但是我应该如何指定我在组件中获取的输入名称和值?
我试试这个,但是名称和值似乎是错误的,我不知道如何声明名称并从组件中获取值。
callDatePicker.js
<Fields
labelNode={<Label>Range</Label>}
labelStartDate="Start Date"
labelEndDate="End Date"
names={["nameStartDate", "nameEndDate"]}
values={[ this.props.start , this.props.end]} << this returns wrong saying the value is object instead of string..
component={ControlledDateRangePicker}
/>
创建两个单独的字段:
<Field
name="startDatePicker"
label="Start Date"
fieldName="startDate"
component={ControlledDateRangePicker}
...
/>
<Field
name="endDatePicker"
label="End Date"
fieldName="endDate"
component={ControlledDateRangePicker}
...
/>
并且在 ControlledDateRangePicker 中只使用一个 DatePicker 组件,这应该是通用的。
这几天一直困扰着我。
我试图在用户选择新的 startDate
时自动调整 Redux 表单中的 endDate
字段,以确保字段之间的间隔永远不会超过 60 天。
为了实现这一点,我们在 ReactDatepicker 的 onChange
中使用了 Redux Form 的 change
道具:https://redux-form.com/8.0.4/docs/api/props.md/#-code-change-field-string-value-any-function-code-
希望对您有所帮助!
你可以这样做。
使用两个字段作为开始日期和结束日期。除非您不会分别获得两个表单值作为开始日期和结束日期。
只需看一下我的代码。你会明白这个过程。
<Field
isRequired
name="leaseStartDate"
component={renderDateComponent}
label="Start Date of Lease"
labelWidth={12}
inputWidth={12}
maxDate`enter code here`
className="form-control"
errorClass="error"
/>
<Field
isRequired
name="leaseEndDate"
component={renderDateComponent}
label="End Date of Lease"
labelWidth={12}
inputWidth={12}
minDate
className="form-control"
errorClass="error"
/>
为您的 datepicker.js 使用 class 组件
使用 mapStateToProps 获取 StartDate 和 EndDate 的更新表单值。
所以如果之前的props有变化,可以使用componentDidUpdate来更新日期
const mapStateToProps = state => ({
formValues: getFormValues('unifyAddEditSiteDetailsForm')(state)
});
class RenderDateComponent extends Component {
constructor(props) {
super(props);
this.state = {
startDate: null,
endDate: null
};
}
componentDidUpdate(prevProps) {
const {formValues} = this.props;
if (formValues !== prevProps.formValues) {
this.updateDate(formValues);
}
}
updateDate = formData => {
this.setState({
startDate: formData.leaseStartDate,
endDate: formData.leaseEndDate
});
}
render() {
const {
input,
labelWidth,
isRequired,
label,
inputWidth,
isIcon,
iconClass,
maxDate,
minDate,
meta: {
touched,
error }
} = this.props;
const { startDate, endDate } = this.state;
return (
<FormGroup
className="hours-form-group"
validationState={(touched && error) ? 'error' : null}
>
<DatePicker
{...input}
className="datepicker-input"
value={input.value && moment(input.value).format('MMM DD, YYYY')}
onBlur={() => input.onBlur(moment(input.value).format('MMM DD, YYYY'))}
autoComplete='off'
maxDate={maxDate ? endDate : null}
minDate={minDate ? startDate : null}
/>
{touched && error && <HelpBlock>{error}</HelpBlock>}
</Col>
</FormGroup>
);
}
}
export default connect(mapStateToProps)(RenderDateComponent);
来自反应日期选择器:
https://github.com/Hacker0x01/react-datepicker/blob/master/docs-site/src/examples/date_range.jsx#L4
为此:
datePicker.js
const { fields, input , meta } = this.props;
const { touched, error, warning } = meta || {}
...
return (
<DatePicker
selected={this.state.startDate ? this.state.startDate : undefined}
selectsStart
startDate={this.state.startDate}
endDate={this.state.endDate}
onChange={this.handleChangeStart}
dateFormat="DD/MM/YYYY"
/>
<span> to </span>
<DatePicker
selected={this.state.endDate ? this.state.endDate : undefined}
selectsEnd
startDate={this.state.startDate}
endDate={this.state.endDate}
onChange={this.handleChangeEnd}
dateFormat="DD/MM/YYYY"
/>
{touched && ( /* << how to declare the meta respectively ? */
(error && <span>ERR</span>)||
(warning && <span>WARN</span>)
)}
...
)
由于有2个字段输入,我决定在redux形式中使用"Fields",但是我应该如何指定我在组件中获取的输入名称和值?
我试试这个,但是名称和值似乎是错误的,我不知道如何声明名称并从组件中获取值。
callDatePicker.js
<Fields
labelNode={<Label>Range</Label>}
labelStartDate="Start Date"
labelEndDate="End Date"
names={["nameStartDate", "nameEndDate"]}
values={[ this.props.start , this.props.end]} << this returns wrong saying the value is object instead of string..
component={ControlledDateRangePicker}
/>
创建两个单独的字段:
<Field
name="startDatePicker"
label="Start Date"
fieldName="startDate"
component={ControlledDateRangePicker}
...
/>
<Field
name="endDatePicker"
label="End Date"
fieldName="endDate"
component={ControlledDateRangePicker}
...
/>
并且在 ControlledDateRangePicker 中只使用一个 DatePicker 组件,这应该是通用的。
这几天一直困扰着我。
我试图在用户选择新的 startDate
时自动调整 Redux 表单中的 endDate
字段,以确保字段之间的间隔永远不会超过 60 天。
为了实现这一点,我们在 ReactDatepicker 的 onChange
中使用了 Redux Form 的 change
道具:https://redux-form.com/8.0.4/docs/api/props.md/#-code-change-field-string-value-any-function-code-
希望对您有所帮助!
你可以这样做。 使用两个字段作为开始日期和结束日期。除非您不会分别获得两个表单值作为开始日期和结束日期。
只需看一下我的代码。你会明白这个过程。
<Field
isRequired
name="leaseStartDate"
component={renderDateComponent}
label="Start Date of Lease"
labelWidth={12}
inputWidth={12}
maxDate`enter code here`
className="form-control"
errorClass="error"
/>
<Field
isRequired
name="leaseEndDate"
component={renderDateComponent}
label="End Date of Lease"
labelWidth={12}
inputWidth={12}
minDate
className="form-control"
errorClass="error"
/>
为您的 datepicker.js 使用 class 组件 使用 mapStateToProps 获取 StartDate 和 EndDate 的更新表单值。 所以如果之前的props有变化,可以使用componentDidUpdate来更新日期
const mapStateToProps = state => ({
formValues: getFormValues('unifyAddEditSiteDetailsForm')(state)
});
class RenderDateComponent extends Component {
constructor(props) {
super(props);
this.state = {
startDate: null,
endDate: null
};
}
componentDidUpdate(prevProps) {
const {formValues} = this.props;
if (formValues !== prevProps.formValues) {
this.updateDate(formValues);
}
}
updateDate = formData => {
this.setState({
startDate: formData.leaseStartDate,
endDate: formData.leaseEndDate
});
}
render() {
const {
input,
labelWidth,
isRequired,
label,
inputWidth,
isIcon,
iconClass,
maxDate,
minDate,
meta: {
touched,
error }
} = this.props;
const { startDate, endDate } = this.state;
return (
<FormGroup
className="hours-form-group"
validationState={(touched && error) ? 'error' : null}
>
<DatePicker
{...input}
className="datepicker-input"
value={input.value && moment(input.value).format('MMM DD, YYYY')}
onBlur={() => input.onBlur(moment(input.value).format('MMM DD, YYYY'))}
autoComplete='off'
maxDate={maxDate ? endDate : null}
minDate={minDate ? startDate : null}
/>
{touched && error && <HelpBlock>{error}</HelpBlock>}
</Col>
</FormGroup>
);
}
}
export default connect(mapStateToProps)(RenderDateComponent);