Home page
Edit page

Using the input field

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

Setup as dependency

moment.js is required, as it is used to validate and format the date typed by the user. Make sure you have it installed in your dependencies:

npm install moment --save
# or with yarn
yarn add moment

In your code, import the component from react-day-picker/DayPickerInput

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

Setup from unpkg

If your are using unpkg, the component is available as DayPicker.Input global var:

<script src="https://unpkg.com/moment@2/min/moment.min.js"></script>
<script src="https://unpkg.com/react-day-picker/lib/daypicker.min.js"></script>
<script type="text/javascript">
  DayPickerInput = DayPicker.Input;
</script>

Example

Open this example in CodeSandbox.

import React from 'react';
import moment from 'moment';

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

export default class MyForm extends React.Component {

  state = {
    selectedDay: undefined,
  }

  handleDayChange = selectedDay => {
    this.setState({ selectedDay });
  };

  render() {
    const datePickerProps = {
      enableOutsideDays: true,
    };
    const value = this.state.selectedDay 
      ? this.state.selectedDay.format('DD/MM/YYYY') 
      : '';
      
    return (
      <form>
        <p>
          <label for="input">Please enter a day:</label>
        </p>
        <DayPickerInput
          name="birthday"
          placeholder="DD/MM/YYYY"
          format="DD/MM/YYYY"
          value={value}
          onDayChange={this.handleDayChange}
          dayPickerProps={}
        />
      </form>
    );
  }
}