Can't get Calendar to work with Redux Forms - redux-form

Question

Trying to get Calendar to work with a Redux Form
Using a Redux Form Field:
<Field name={name} component={this.renderCal}/>
which is leveraging a stateless function:
renderCal({input, ...rest}) {
input.value = new Date();
return <Calendar {...input}
onChange={() => input.onChange(input.value)}
value={input.value}
{...rest}/>
}
When I submit the form, the value is still null. I appears like the value is not bound to the component. This is my request payload from the Chrome Developer Tools > Network ...
inputs : [{name: "fromDate", title: "From Date", dataType: "date", format: "mm/dd/yyyy", value: null}] 0 : {name: "fromDate", title: "From Date", dataType: "date", format: "mm/dd/yyyy", value: null} dataType : "date" format : "mm/dd/yyyy" name : "fromDate" title : "From Date" value : null
Does anyone have Calendar working with Redux Form as a stateless function?
Thanks,
Steve

Answer 1

Steve and I found a solution. Posting back our findings for everyone else...
To clarify, the initial state/shape of the form is actually an array of dates:
{
myDates: [
{myDate: null},
{myDate: null},
{myDate: null}
]
}
If you just need to tie DateTimePicker up to a Redux Form field then you can drop renderDynamicFields and use renderDynamicField directly:
<Field name={name} component={renderDynamicField}/>
Points of Note:
Changed directions slightly and are now using DateTimePicker as opposed to Calendar because we also needed the time portion. That being said the solution should work with Calendar too.
Used Redux Form FieldArray
DateTimePicker needed a "defaultValue"
Solution
import React from "react";
import {Button, Col, Form, FormGroup, ControlLabel} from "react-bootstrap";
import {reduxForm, Field, FieldArray} from "redux-form";
import {connect} from "react-redux";
import {DateTimePicker} from "react-widgets";
class ReactWidgets extends React.Component {
constructor(props) {
super(props);
this.renderDynamicFields = this.renderDynamicFields.bind(this);
}
submit(form) {
console.log('form', form);
}
renderDynamicFields({fields = []}) {
let collection = [];
fields.map((name, index) => {
collection.push(<Field key={index} name={`${name}.myDate`} component={renderDynamicField}/>);
});
return <div>{collection}</div>;
function renderDynamicField(props) {
const {input} = props;
let component = null;
if (true) { // going to support different types...
component = <DateTimePicker
defaultValue={input.value || new Date()}
onChange={(value) => {
input.onChange(value);
}}/>;
}
return component;
}
}
render() {
const {error, handleSubmit, pristine, reset, submitting} = this.props;
return (
<Form horizontal onSubmit={handleSubmit(this.submit)}>
<FormGroup><Col componentClass={ControlLabel} xs={2}>
My Date2</Col>
<Col xs={4}>
<FieldArray name="myDates" component={this.renderDynamicFields}/>
</Col>
</FormGroup>
<FormGroup>
<Col smOffset={1} xs={11}>
<Button type="submit" bsStyle="primary"
disabled={pristine || submitting}>Save</Button>
<Button type="button" disabled={pristine || submitting}
onClick={reset}>Reset</Button>
</Col>
</FormGroup>
</Form>
);
}
}
ReactWidgets = reduxForm({
form: 'reactWidgets'
})(ReactWidgets);
ReactWidgets = connect(
state => {
return {
initialValues: {
myDates: [
{myDate: null},
{myDate: null},
{myDate: null}
]
},
}
})(ReactWidgets)
export default ReactWidgets