Home page

Using DayPickerInput

The package includes <DayPickerInput />, a component rendering an input field and displaying react-day-picker in an overlay.

import DayPickerInput from 'react-day-picker/DayPickerInput';

If you are using unpkg, the component is available as DayPicker.Input global variable.

Example

In its simple form, you use DayPickerInput to get the day typed in the input field, or the day picked in the calendar:

Code

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

export default class MyForm extends React.Component {
  constructor(props) {
    super(props);
    this.handleDayChange = this.handleDayChange.bind(this);
    this.state = {
      selectedDay: undefined,
    };
  }

  handleDayChange(day) {
    this.setState({ selectedDay: day });
  }

  render() {
    const { selectedDay } = this.state;
    return (
      <div>
        {selectedDay && <p>Day: {selectedDay.toLocaleDateString()}</p>}
        {!selectedDay && <p>Choose a day</p>}
        <DayPickerInput onDayChange={this.handleDayChange} />
      </div>
    );
  }
}

Result

Choose a day

Customizing the DayPicker

To change how the DayPicker appears in the overlay, use the dayPickerPropswhich accepts all the DayPicker props:

Code

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

export default function MyDatePicker() {
  return (
    <DayPickerInput
      dayPickerProps={{
        month: new Date(2018, 10),
        showWeekNumbers: true,
        todayButton: 'Today',
      }}
    />
  );
}

Result

Changing the date format

As default, the date format is the ”ugly” YYYY-M-D. This is because parsing JavaScript dates from strings is not an easy task, and we don’t want to depend on an external library for doing this.

To customize the way dates are parsed and formatted, for example using your date library of choice, use the parseDate and the formatDate props. See below for examples using date-fns or moment.js.

Example using date-fns

Code

import React from 'react';

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

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

function parseDate(str, format, locale) {
  const parsed = dateFnsParse(str, format, new Date(), { locale });
  if (DateUtils.isDate(parsed)) {
    return parsed;
  }
  return undefined;
}

function formatDate(date, format, locale) {
  return dateFnsFormat(date, format, { locale });
}

export default function Example() {
  const FORMAT = 'MM/dd/yyyy';
  return (
    <DayPickerInput
      formatDate={formatDate}
      format={FORMAT}
      parseDate={parseDate}
      placeholder={`${dateFnsFormat(new Date(), FORMAT)}`}
    />
  );
}

Result

Example using moment.js

If you use moment.js, we provide an utility for using its parser and formatter functions. See this example.

Code

import React from 'react';

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

import MomentLocaleUtils, {
  formatDate,
  parseDate,
} from 'react-day-picker/moment';

import 'moment/locale/it';

export default function Example() {
  return (
    <div>
      <p>In English (default):</p>
      <DayPickerInput
        formatDate={formatDate}
        parseDate={parseDate}
        placeholder={`${formatDate(new Date())}`}
      />
      <p>
        In Italian, using <code>{'format="LL"'}</code>:
      </p>
      <DayPickerInput
        formatDate={formatDate}
        parseDate={parseDate}
        format="LL"
        placeholder={`${formatDate(new Date(), 'LL', 'it')}`}
        dayPickerProps={{
          locale: 'it',
          localeUtils: MomentLocaleUtils,
        }}
      />
    </div>
  );
}

Result

In English (default):

In Italian, using format="LL":