CODEWITHSUNDEEP
reactjsdatepickerreact-reduxmomentjsredux-form
Richard Zheng
Richard Zheng

Reputation: 179

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

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:

enter image description here

Thanks for the help in advance!

Upvotes: 0

Views: 1357

Answers (1)

Ким Синикула
Ким Синикула

Reputation: 81

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

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

Upvotes: 1

Related Questions