redux-form-material-ui controlled DatePicker

Question

i can't use DatePicker in redux-form-material-ui as controlled unit. i intend to generate today date in the beginning. here's my code:

import React from 'react';
import { Field, reduxForm } from 'redux-form';
import { DatePicker } from 'redux-form-material-ui';

class PeriodForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
          startDate:new Date(),
        }
    this.handleStartDateChange = this.handleStartDateChange.bind(this);
    }

    handleStartDateChange = (event, date) => {
      this.setState({
        startDate: date
      });
    };

    render(){
    return(
            <div>
                    <form onSubmit={handleSubmit}>
                        <div className="field-line">
                            <Field 
                                name="startDate" 
                                floatingLabelText="Start Date"
                                component={DatePicker} 
                                format={null}
                                value={this.state.startDate}
                                autoOk={true}
                                DateTimeFormat={Intl.DateTimeFormat}
                                onChange={handleStartDateChange}
                            />
                        </div>
                     </form>
                  </div>
)}}
export default reduxForm({
    form: 'PeriodForm', 
})(PeriodForm);

from code above, it always show nothing in datepicker, it should generate today date. And let say if i have a table contain list of date,then every time i click on the date label, it will generate it's value for datepicker. is it right if i just do "setState" to my this.state.startDate ?

Answer 1

First off, if you're already using redux-form for your form state management, you shouldn't use local state for storing your form values, as this is already taken care of by redux-form.

if you want to supply an initial value to your field, you can do this by passing initialValues in your mapStateToProps phase.

Also, you don't have to explicitly set a value and an onChange handler on your Field, since the imported wrapped DatePicker component already has that logic in it.

The following code should work:

import React from 'react';
import { connect } from 'react-redux';
import { Field, reduxForm } from 'redux-form';
import { DatePicker } from 'redux-form-material-ui';

class PeriodForm extends React.Component {
  render() {
    const { handleSubmit } = this.props;

    return (
      <div>
        <form onSubmit={handleSubmit}>
          <div className="field-line">
            <Field 
              name="startDate" 
              floatingLabelText="Start Date"
              component={DatePicker} 
              format={null}
              autoOk={true}
              DateTimeFormat={Intl.DateTimeFormat}
              />
          </div>
        </form>
      </div>);
  }
}

const Form = reduxForm({
  form: 'PeriodForm',
  enableReinitialize: true
})(PeriodForm);

export default connect(() => ({
  initialValues: {
    startDate: new Date()
  }
}))(Form);

Answer 2

i already fix my problem. i recompose DatePicker component as below:

MUIDatePicker.js

import React from 'react';
import { DatePicker } from 'redux-form-material-ui'

const MUIDatePicker = props => (
  <DatePicker 
    {...props}
    value={props.val}
  />
)

export default MUIDatePicker;

then i call it on component props inside Field:

<Field 
    name="startDate" 
    floatingLabelText="Start Date"
    component={MUIDatePicker}
    format={null}
    val={this.state.startDate}
    autoOk={true}
    onChange={handleStartDateChange}
    DateTimeFormat={Intl.DateTimeFormat}
 />

it seems if i pass directly DatePicker inside component props, it wouldn't set the value.

Answer 3

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

const DatePickerExampleInline = () => (
  <div>
   <DatePicker hintText="Portrait Inline Dialog" container="inline" />
   <DatePicker hintText="Landscape Inline Dialog" container="inline" mode="landscape" />
  </div>
);
export default DatePickerExampleInline;

You can user "material-ui", Above is working example. Hope it will help you.