@brighthr/component-datepicker

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

DatePicker Props

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.

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.