Code for example redux-form and react-md

ExampleReduxForm.jsx

import React from 'react';
import { Field, reduxForm } from 'redux-form';
import Button from 'react-md/lib/Buttons/Button';
import TextField from 'react-md/lib/TextFields';

const required = ['email', 'phone'];
const validate = values => {
  const errors = {};
  required.forEach(field => {
    if (!values[field]) {
      errors[field] = 'Required';
    }
  });

  return errors;
};

/* eslint-disable react/prop-types */
const renderTextField = ({ input, meta: { touched, error }, ...others }) => (
  <TextField {...input} {...others} error={touched && !!error} errorText={error} />
);

const ExampleForm = reduxForm({ form: 'example', validate })(({ handleSubmit }) => (
  <form onSubmit={handleSubmit} className="md-grid md-text-container">
    <Field
      id="uid"
      name="uid"
      type="text"
      label="Unique identifier"
      helpText="A unique id, probably a serial number"
      component={renderTextField}
      required
      className="md-cell md-cell--12"
    />
    <Field
      id="phone"
      name="phone"
      type="tel"
      label="Phone number"
      placeholder="(xxx) xxx-xxxx"
      helpText="Do something"
      className="md-cell md-cell--12"
      required
      component={renderTextField}
    />
    <footer className="md-dialog-footer md-dialog-footer--inline md-cell md-cell--12">
      <Button flat primary label="Submit" type="submit" className="md-cell--right" />
    </footer>
  </form>
));

const handleSubmit = values => {
  console.log('values:', values);
};

export default () => <ExampleForm onSubmit={handleSubmit} />;

Can you please give an example of how to use DatePicker in the ReduxForm

@nikitamendelbaum did you find a solution to wrapping the DatePicker? I'm having a similar issue

@pulpfree no, as a temporary solution had to use the input type=date with the text wrapper instead. But I still look for the solution. Will work on it soon

function CustomDatePicker ({ id, placeholder, input, maxDate, minDate, className, type }) {
    return (
        <DatePicker
            id="inlineCenter"
            label="Select a date"
            lineDirection="center"
            className="md-cell"
            onChange={input.onChange}
            maxDate={maxDate}
            minDate={minDate}
        />
    )
}

   <Field
          required
          id="Effective Date"
          name="effectiveDate"
          label="Effective Date"
          maxDate={this.state.schedule.expirationDate ? new Date(this.state.schedule.expirationDate) : null}
          className="md-cell md-cell--4-tablet md-cell--4-phone md-cell--bottom"
          value={moment(this.state.schedule.effectiveDate).format("MM/DD/YYYY")}
          onChange={(event, textDate) => {this._handleChange("effectiveDate", textDate);}}
          component={CustomDatePicker}
   />

@pulpfree this is a working datepicker component