@brighthr/daterangepicker NPM

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 />

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.