DateRangePicker

To install, type the following into the command line at the root of your project:

npm i @brighthr/component-daterangepicker

To implement the DateRangePicker component into your project you’ll need to add the import:

import DateRangePicker from '@brighthr/daterangepicker';
import '@brighthr/daterangepicker/dist/index.css';

After adding import into your project you can use it simply like:

<DateRangePicker />

Props

| Name | Type | Default | Description | |---------------|------------------|------------------------|-----------------------------------------------------------------------| | endDate | Date | null | Value for the end date. | | error | boolean | false | If true, the input will show with a red theme. | | legacyStyling | boolean | false | If true, the calendar will have the older appearance. | | locale | string | "en-gb" | Changes the date formats to suit the selected locale. | | maxDate | Date | '1900-01-01' | | | minDate | Date | '2100-12-31' | | | onBlur | () => void | | Function for handling onBlur event. | | onChange | () => void | | Function for handling onChange event. | | placeholder | string | "Select date range" | Sets the placeholder text for the input. | | setEndDate | (date) => void | | Function for setting the external state when the end date is set. | | setStartDate | (date) => void | | Function for setting the external state when the start date is set. | | startDate | Date | | Value for the start date. |