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