To react | reduction form | material-ui | how to combine datepicker with my form

Question

After solving some problems, I continued to send DatePicker data to my form. In my form, I mainly use elements from redux-form-material-ui, but DatePicker is not part of it.

I found 2 ways to create a DatePicker component with a redux form.

<Field
  name="startDate"
  autoOk={true}
  floatingLabelText="startDate"
  component={(startDate) => {
    return <DatePicker {...startDate} />;
  }}
  onChange={(event, date) => {console.log(date);}}
/>

and

<DatePicker
  name="startDate"
  autoOk={true}
  floatingLabelText="startDate"
  onChange={(event, date) => {console.log(date)}} />

The problem is that I don’t know how to update form data using it. The first example does not even show the selected date in the text box. In the store, form.myFormI see that I made the date field active, but it never updates with the selected date. The second shows the selected date, but it is not part of the object form.myForm...

(, https://github.com/erikras/redux-form/issues/364), fields, this.props.fields.startDate.onChange.

, redux-form material-ui, . , , onChange, . , , - , .

"react": "15.1.0",
"react-tap-event-plugin": "1.0.0",
"redux": "3.0.5",
"redux-form": "^6.0.0-alpha.4",
"redux-form-material-ui": "^2.0.0",

Answer 1

import React from 'react';
import DatePicker from 'material-ui/DatePicker';

export default ({ input, label, meta: { touched, error }, ...custom }) => {
    return (
        <DatePicker
          onChange={(e, val) => {return input.onChange(val)}}
          {...custom}
          value={input.value}
        />
);
}

renderDatePicker.js,

<Field name="created_on" component={RenderDatePicker} floatingLabelText="Created Date"/>

Field redux-form. {created_on: new Date('someiso8601')} this.props.initialize, .

Answer 2

response-datepicker . "selected".

const selectedDate = this.props.fields.date.value ?
  moment(this.props.fields.date.value, 'DD/MM/YYYY') :
  moment();

<DatePicker
  {...date}
  className="form-control"
  dateFormat="DD/MM/YYYY"
  selected={selectedDate}
/>

Answer 3

.

<DatePicker
    selected={dateField.value}
    onChange={param => dateField.onChange(param)} />

dateField :

const {fields: {dateField}, handleSubmit} = this.props;

Answer 4

Datepicker, , . . , , .

redux-form

import moment from 'moment'
import { change } from 'redux-form'  //We use the change to dispatch the own props of the redux-form component to resetDateField

, DatePicker. :

const datePickerInput = ({input,name,label,...props}) => {
 return (
  <div>
   <label htmlFor={input.name}> 
    <span>
     {label}
    </span> 
   </label>
   <div>
      <DatePicker
          className='form-control'
          {...input}
          {...props}
      />
   </div>
  </div>
 )
} 

.

<Field
  name = "startDate"
  label = "Start Date"
  dateFormat = 'MMM Do YY'
  component={datePickerInput}
  selected = {/*pass state value of startDate or pass some default null for startDate if nothing selected*/}
  onChange={ (date) => {this.handleChangeStartDate(date, 'startDate')} } //bind this function in constructor and also setState value for your start date as null or some default 
/>

onChange :

handleChangeStartDate(date, target) {
    const {resetDateField } = this.props
    this.setState({
      [target]: moment(date)
    })
    resetDateField('startDate', '' )
  }

resetDateField reduxForm @connect, dispatch ownProps resetDateField, , , , resetDateField.