Redux-form DatePicker returns Moment object instead of date for the first selected value

Question

I'm using the DatePicker module for a task manager react app. It integrates well except for the first time changing the date, it always returns an object instead of the date as expected. However it magically returns the correct output if I select another date after. Here is my code for that portion of my redux form:

import React, { Component } from 'react';
import { Field, reduxForm } from 'redux-form';
import moment from 'moment';
import DatePicker from 'react-datepicker';

import 'react-datepicker/dist/react-datepicker.css';

class TaskForm extends Component {

  constructor (props) {
    super(props)
  }


  render() {

    const { handleSubmit } = this.props;

    const renderDatePicker = ({input}) => (
      <div>
            <DatePicker {...input} dateForm="MM/DD/YYYY" selected={input.value ? moment(input.value, 'MM/DD/YYYY') : null} />
      </div>
    );


    return (
      <div>
        <form onSubmit={ handleSubmit}>
          <div>
            {/* Date selection */}
            <label>Date:</label>
            <Field name="date" component={renderDatePicker} />
          </div>    
          <button type="submit">Save</button>
        </form>
      </div>
    )
  };
};

export default reduxForm({form: 'taskForm'})(TaskForm);

Here is the value that I console.logged out:

Thanks for the help in advance!

Answer 1

Moment value is an object always, to get the exact format you want, just use .format, eg:

moment(date).format('MM/DD/YYYY')