@brighthr/component-datepicker NPM

DatePicker

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

npm i @brighthr/component-datepicker

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

import DatePicker from '@brighthr/component-datepicker';

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

import { DateRangePicker } from '@brighthr/component-datepicker';

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

<DatePicker />
  or
<DateRangePicker />

Name	Type	Default	Description
autoFocus	`boolean`	`false`	If `true`, the calendar be be open and focused when the input is rendered.
date	`Date`		The currently selected date.
error	`boolean`	`false`	If `true`, the input will show with a red theme.
id	`string`		Sets an id to be used in combination with a label `for` attribute.
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'`	Sets the maximum date that can be input
minDate	`Date`	`'2100-12-31'`	Sets the minimum date that can be input
onBlur	`() => void`		Function for handling onBlur event.
onChange	`() => void`		Function for handling onChange event.
onFocus	`() => void`		Function for handling onFocus event.
placeholder	`string`	`"dd/mm/yyyy"`	Sets the placeholder text for the input.
relativePosition	`boolean`	`false`	If true, the calendar position will be relative instead of absolute.
setDate	`(date) => void`		Function for setting the external state when the date is set.

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.