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>