从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形式的“字段”,但是如何指定在组件中获得的输入名称和值?
我尝试了一下,但是名称和值似乎是错误的,而且我不知道如何声明名称并从组件中获取值。
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}
/>
答案 0 :(得分:0)
创建两个单独的字段:
<Field
name="startDatePicker"
label="Start Date"
fieldName="startDate"
component={ControlledDateRangePicker}
...
/>
<Field
name="endDatePicker"
label="End Date"
fieldName="endDate"
component={ControlledDateRangePicker}
...
/>
并且在ControlledDateRangePicker中仅使用一个DatePicker组件,该组件应该是通用的。
答案 1 :(得分:0)
在过去的几天里,这一直困扰着我。
当用户选择新的endDate
时,我试图在Redux Form中自动调整startDate
字段,以确保字段之间的间隔永远不会超过60天。
为此,我们在ReactDatepicker的change
中利用了Redux Form的onChange
道具:https://redux-form.com/8.0.4/docs/api/props.md/#-code-change-field-string-value-any-function-code-
希望这会有所帮助!
答案 2 :(得分:0)
你可以做这样的事情。 使用两个字段作为开始日期和结束日期。除非您不会分别获得两个表单值作为开始日期和结束日期。
只需通过我的代码。你会明白这个过程。
<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 使用类组件 使用 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);