DatePicker date input with custom format

You should use the value lifecycle methods that redux-form provides for this.

Use parse to format the value coming from react-datepicker for storage and format to parse the value from the store back for react-datepicker to present it. Example:

function formatDateForInput(storedDate) {
  // the returned value will be available as `input.value`
  return moment(pickedDate).format('right format for your input')
}

function parseDateForStore(pickedDate) {
  // the returned value will be stored in the redux store
  return moment(storedDate).format('desired format for storage')
}

<Field
  component={ MyDatePicker }
  format={ formatDateForInput }
  parse={ parseDateForStore }
/>

If this does not work for your, I would recommend checking if you need to put a custom onChange handler between the DatePicker and input prop provided by redux-form. Because it could be that the values DatePicker is using to call onChange are ones that redux-form does not understand. Like this:

const MyDatePicker = ({ input, meta: { touched, error } }) => {

  const onChange = event => {
    const pickedDate = event.path.to.value;
    input.onChange(pickedDate);
  }

  return (
    <div>
      <DatePicker
        dateFormat="YYYY-MM-DD"
        selected={input.value ? moment(input.value) : null}
        onChange={ onChange }
      />
      {
        touched && error &&
        <span className="error">
          {error}
        </span>
      }
    </div>
  );
}

MyDatePicker.propTypes = {
  input: PropTypes.shape().isRequired,
  meta: PropTypes.shape().isRequired
};

export default MyDatePicker;

Hope this helps!

If i am understanding correct you just need 2 different formats for same date one on UI and other to save ? moment(date).format('DD-MM-YYYY') and moment(date).format('YYYY-MM-DD HH:MM:SS') will give you both formats date.