Datepicker from '@invisionag/iris-react-datepicker';

react-datepicker is a component that provides a graphical input element for dates. It is essentially a wrapper for blueprint's datepicker component which itself is a wrapper for react-day-picker with some injixo styling and quality-of-life improvements.

Usage

Basic

<Datepicker onChange={date => console.log(`user has selected ${date}`)} />

min and max date

You can provide a min and max date (both or individually) to disable date ranges from selection. You can directly pass moment objects. For more involved date filtering logic (such as disabling weekends), refer to the modifiers documentation.

<Datepicker
    minDate={moment('2017-01-01 00:00:00Z')}
    maxDate={moment('2018-01-01 00:00:00Z')}
/>

highlightRange

This option will highlight the entire week or month the selected day is in. Hovering a date will also highlight the range it is in. The start day of the week is not changeable because it currently uses isoWeek from moment to determine when a week starts and ends.

<Datepicker
    highlightRange="week"
/>

<Datepicker
    highlightRange="month"
/>

Custom trigger elements

If you want the day picker to be triggered by something other than the default input element, you can pass a function that returns the component you want to use as trigger. The first argument of this function provides a reference to the component method that toggles the datepicker.

<Datepicker>
    {({ toggle }) => <Button onClick={toggle}>Click to open Datepicker</Button>}
</Datepicker>