@brighthr/component-datepicker
v4.1.0
Published
To install, type the following into the command line at the root of your project:
Downloads
1,927
Readme
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';
After adding import into your project you can use it simply like:
<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. |