DayPickerInput API

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

API summary

Component’s Props

classNames, clickUnselectsDay, component, dayPickerProps, format, formatDate, hideOnDayClick, inputProps, overlayComponent, parseDate, placeholder, showOverlay, value

Event handlers

onDayChange

Public methods

getDayPicker, getInput, hideDayPicker, showDayPicker


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.

The component must be compatible with the standard HTML input: i.e. it should support theonChange, onFocus, onKeyUp, onClick and onBlur and the focus props.

If your custom component doesn’t support such props, wrap it in a component contaning them. For example:

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

class MyInputWithFocus extends React.Component {
  focus = () => {
    this.input.focus();
  }
  render() {
    return (
      <MyInputWithoutFocus 
        ref={el => (this.input = el)} 
        {...this.props} 
      />
    );
  }
}

function MyDayPickerInput(props) {
  return <DayPickerInput component={MyInputWithFocus} />
}

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.

overlayComponent React.Component

A React element or constructor to use as 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

See also 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.

value string | Date

The value of the input field.


Event handlers

onDayChange (day: Date, modifiers: Object) ⇒ void

Handler function called when the user types a valid day (according to the format prop) or when a day is clicked on the calendar. If the day is not valid, day and modifiers arguments will be undefined (useful to display validation warnings).


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.