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.

Use moment.js to parse and format dates

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":