Using date-fns to parse and format dates

Use the parseDate prop to parse the input typed by the user, and the formatDate prop to format them.

In the following example, we are importing parse and format from date-fns.

Code


import React from 'react';

import DayPickerInput from 'react-day-picker/DayPickerInput';
import 'react-day-picker/lib/style.css';

import format from 'date-fns/format';
import parse from 'date-fns/parse';

export default function Example() {
  const FORMAT = 'M/D/YYYY';
  return (
    <DayPickerInput
      formatDate={format}
      format={FORMAT}
      parseDate={parse}
      placeholder={`${format(new Date(), FORMAT)}`}
    />
  );
}

Result