DayPickerInput API

DayPickerInput Props

classNames Object

Customize the CSS class names used when rendering the component.

The object expects the following keys:

{
  container,            // The container element
  overlayWrapper,       // The overlay's wrapper
  overlay,              // The overlay's container
}

clickUnselectsDay boolean = false

Unselect and clear the input when clicking on a previously selected day.

component string | React.Component = "input"

The component class to render the input field.

<DayPickerInput component={props => <input {...props} />} />

The component must support theonChange, onFocus, onKeyUp, onClick and onBlur props. If you want to keep the focus when the user picks a day, the component class must have a focus method.

dayPickerProps Object

The DayPicker props to customize the calendar rendered in the overlay.

format string | string[]

The format string(s) used for formatting and parsing dates. It works with parseDate and formatDate

formatDate (date: Date?, format: string? | string[]?, locale: string?) ⇒ string

Date formatter used for displaying the selected date as value of the input field. As default, it returns dates formatted as YYYY-M-D.
Arguments: format is the value coming from the format prop, while locale is from dayPickerProps.
See also parseDate.

If you are using moment.js in your app, we already provide this function as addon: see this example.

hideOnDayClick boolean = true

Hide the overlay when the user clicks on a day cell.

inputProps Object

Additional props to add to the input component. The value key is ignored: use the value prop instead.

keepFocus boolean = true

Keep focus on the input field after switching the focus into the overlay. You may want to disable the focus on the input field when using an overlayComponent.

overlayComponent React.Component

A custom React Element or Component to use for the overlay. The element will receive the following props:

• selectedDay: ?Date The currently selected day
• month: Date The month displayed in the calendar
• input: DOM Element The input field
• classNames: Object The input field
• ...props: Object Other props to pass to the HTML element to handle interaction with the calendar

import React from 'react';
import { DayPickerInput } from 'react-day-picker';

function OverlayComponent({ children, ...props }) {
  return (
    <div {...props}>
      <p>My custom things</p>
      /* include the calendar */
      { children }
      <p>Some content below the calendar</p>
    </div>
  );
}

function MyDayPickerInput() {
  return <DayPickerInput overlayComponent={OverlayComponent} />;
}

As default, the input field keep always the focus when interacting with the calendar. However this may cause problems if the custom overlay has an input field, so you may need to set keepFocus={false}. See this example.

parseDate (str: string?, format: string? | string[]?, locale: string?) ⇒ Date | void

Date parser used for parsing the string typed in the input field. As default, it parses only dates formatted as YYYY-M-D.
Arguments: format is the value coming from the format prop, while locale is from dayPickerProps.
See also formatDate.

If you are using moment.js in your app, we already provide this function as addon: see this example.

placeholder string

The placeholder to use for the input field.

showOverlay boolean = false

Show the overlay during the initial rendering of the component. This is useful if you want to keep the overlay visibile while styling it.

style object

The style attribute applied to the container.

value string | Date

The value of the input field.

Event handlers

onDayChange (day: ?Date, modifiers: Object, dayPickerInput: DayPickerInput) ⇒ void

Handler function called when the user types into the input field or when a day is clicked on the calendar.

Implementation Notes

• If the typed value is empty or not valid, day is undefined and modifiers is an empty object.
• The third argument is the DayPickerInput instance. You can use it to access to the instance props or public methods

handleDayChange(selectedDay, modifiers, dayPickerInput) {
  const input = dayPickerInput.getInput();
  this.setState({
    selectedDay,
    isEmpty: !input.value.trim(),
    isValidDay: typeof selectedDay !== 'undefined',
    isDisabled: modifiers.disabled === true,
  });
}

<DayPickerInput
  onDayChange={handleDayChange}
  selectedDay={this.state.selectedDay}
/>

onDayPickerHide () ⇒ void

Handler function called when the overlay is hidden.

onDayPickerShow () ⇒ void

Handler function called when the overlay is hidden.

Public methods

getDayPicker () ⇒ DayPicker

Return the DayPicker instance.

getInput () ⇒ DOMNode | ReactNode

Return the input element instance.

showDayPicker () ⇒ void

Show the Day Picker overlay.

hideDayPicker () ⇒ void

Hide the Day Picker overlay.