DatePicker date input with custom format

Question

I want to stote dates in my state using redux-form. I use react-datepicker. To make the datepicker compatible with my redux-form i write:

import React, { PropTypes } from 'react';
import DatePicker from 'react-datepicker';
import moment from 'moment';
import 'react-datepicker/dist/react-datepicker.css';

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

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

    export default MyDatePicker;

The problem is that when i choose date i want it to show as DD-MM-YYYY but i want the date to be saved in my state with the YYYY-MM-DD HH:MM:SS format. How to do this? I use the moment's format function but it did not seem to work

Sailfish

What do you mean it didn't seem to work ? what error you getting or what result you getting? – Stevestevedore

Answer 1

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!

Exanthema

Answer 2

Just use the prop dateFormat="dd/MM/yyyy"

Example :

<DatePicker 
    selected={startDate} 
    onChange={date => handleChange(date)} 
    dateFormat="DD/MM/YYYY"
/>

Stumpf

Answer 3

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.

Stevestevedore

Answer 4

I used the below props -mask, inputFormat and format - to change the default format to "yyyy-MM-dd" format. The format code "yyyy-MM-dd" is important, play around this to find the desired format.

Example:

<LocalizationProvider dateAdapter={AdapterDateFns} >
   <DatePicker
      label="SomeDate"
      {...register("details_received_date")}
      mask="____-__-__"
      inputFormat="yyyy-MM-dd"
      format="yyyy-MM-dd"
      value={someDate}
      onChange={(newValue) => {setSomeDate(newValue);}}
      renderInput={(params) => <TextField {...params} />}
      />
</LocalizationProvider>

This will display in the front end and provide the value as well in the desired format. Hope this helps.

Derma

Answer 5

simply use this prop

dateFormat="dd/MM/yyyy"

"dd" for date, "MM" for month, "yyyy" for year

<DatePicker
  selected={startDate}
  onChange={(date) => setStartDate(date)}
  placeholderText="Click to select a date"
  dateFormat="dd/MM/yyyy"
/>

Edgaredgard

Answer 6

Try this

inputFormat="DD/MM/YYYY"

const [value, setValue] = useState(null);

<LocalizationProvider dateAdapter={AdapterDayjs}>
    <DatePicker
        label="DatePicker Example"
        value={value}
        onChange={(newValue) => {
          setValue(newValue);
        }}
        renderInput={(params) => <TextField {...params} />}
        inputFormat="DD/MM/YYYY"
      />

</LocalizationProvider>

Vo