Datepicker
A Datepicker component simplifies date selection for users by providing a calendar interface within your application. It enhances user experience by streamlining the process of inputting dates and ensuring accuracy. Datepickers commonly include features such as date range selection and accessibility support.
Installation
To get started, install the Datepicker via npm:
npm i react-custom-ui-datepicker
Or via yarn:
yarn add react-custom-ui-datepicker
RangeMode
<Datepicker range={true} />Small Size
<Datepicker size="small" />Props Available
| Props | Options | Description |
|---|---|---|
| variant | 'light' | 'dark' | 'custom' | Theme in light, dark or custom mode |
| size | 'small' | Size of the datepicker |
| range | 'true' | 'false' | Enable the datepicker range mode |
| onChangeDate | function | Function to handle the date change |
| date | variable | Value of the date state |
| disabled | boolean | Disable the datepicker |
| placeholder | string | The datepicker input placeholder |
| config | object | The datepicker configuration |
Config Props
| Props | Options | Description |
|---|---|---|
| locale | 'fr' | 'de' | 'en-AU' | 'en-CA' | 'en-GB' | 'en-US' | 'es' | 'pl' | 'pt' | 'pt-BR' | 'ru' | The datepicker language |
| dateFormat | 'MM/dd/yyyy' | 'dd/MM/yyyy' | dd/MM/yyyy HH:mm' | etc | The date format in the output of the datepicker. Able to use any format from the date-fns library. |
| inputStyles | Check Input Styles | The input styles, check the Input Props table for more details. |
| calendarStyles | Check Calendar Styles | The calendar styles, check the Calendar Styles Props table for more details. |
| calendarFormat | Check Calendar Format | The calendar format, check the Calendar Format Props table for more details. |
Input Styles
| Props | Options | Description |
|---|---|---|
| backgroundColor | CSS background-color | |
| borderColor | CSS border-color | |
| placeholderColor | CSS ::placeholder and define the color | |
| textColor | CSS color | |
| errorConfig | Check Error Config Props | Define the config of the error on wrong dates on the datepicker |
| focusConfig | Check Focus Config Props | Define the config of the focus on the input |
| disabledConfig | Check Disabled Config Props | Define the config of the disabled styles on the input |
Error Config Props
| Props | Options | Description |
|---|---|---|
| errorText | string | The error message to display when the date is invalid |
| errorTextColor | The error text color | |
| errorTextSize | Any font-size | The error text size |
| errorBorderColor | The error border-color on the input | |
| hideError | 'true' | 'false' | Hide the error |
| hideErrorIcon | 'true' | 'false' | Hide the error icon |
Focus Config Props
| Props | Options | Description |
|---|---|---|
| focusTextColor | The text color when the input is focused | |
| focusIconColor | The calendar icon color when the input is focused | |
| focusBorderColor | The input border-color when it is focused |
Disabled Config Props
| Props | Options | Description |
|---|---|---|
| disabledTextColor | The text color when the input is disabled | |
| disabledIconColor | The calendar icon color when the input is disabled | |
| disabledBackgroundColor | The input background-color when it is disabled | |
| disabledBorderColor | The input border-color when it is disabled |
Calendar Styles
| Props | Options | Description |
|---|---|---|
| calendarBackground | The calendar background-color | |
| headerIconsColor | The header icons color | |
| headerTextColor | The header text color | |
| headerTextWeight | All font-weight css | The header text weight |
| headerTextSize | All font-size css | The header text size |
| daysOfWeekColor | The days of the week color | |
| daysOfWeekSize | All font-size css | |
| daysOfWeekWeight | All font-weight css | The days of the week font-weight |
| inactiveDaysColor | The inactive days color | |
| hideInactiveDays | 'true' | 'false' | Hide the inactive days |
| dayRadius | All sizes of css border-radius | The days border-radius |
| dayColor | The days text color | |
| daySize | All font-size css | The days font-size |
| dayWeight | All font-weight css | The days font-weight |
| dayHoverColor | The days text color when hovering | |
| rangeHoverColor | The range hover color | |
| applyBtnText | Any string text | The apply button text |
| applyBtnTextColor | The apply button text color | |
| applyBtnBorderColor | The apply button border-color | |
| applyBtnBackgroundColor | The apply button background-color | |
| applyBtnHoverTextColor | The apply button hover text color | |
| applyBtnHoverBackgroundColor | The apply button hover background-color | |
| applyDisabledBtnBackgroundColor | The apply button disabled background-color | |
| applyDisabledBtnTextColor | The apply button disabled text color | |
| applyDisabledBtnBorderColor | The apply button disabled border-color | |
| applyDisabledBtnHoverTextColor | The apply button disabled hover text color | |
| applyDisabledBtnCursor | All cursor css style | The apply button disabled cursor |
| cancelBtnText | Any string text | The cancel button text |
| cancelBtnTextColor | The cancel button text color | |
| cancelBtnBorderColor | The cancel button border-color | |
| cancelBtnBackgroundColor | The cancel button background-color | |
| cancelBtnHoverTextColor | The cancel button hover text color | |
| cancelBtnHoverBackgroundColor | The cancel button hover background-color | |
| selectedDayColor | The selected day color | |
| selectedDayBackgroundColor | The selected day background-color | |
| todayColor | The today color | |
| todayBorderColor | The today border-color | |
| todayBorderRadius | All sizes of css border-radius | The today border-radius |
Calendar Format
| Props | Options | Description |
|---|---|---|
| hideActionButtons | 'true' | 'false' | Hide the action buttons |
| daysOfWeekFormat | 'EEEE' | 'EEEEE' | 'EEEEEE' | The days of the week format |
| daysHeaderMonth | 'M' | 'Mo' | 'MM' | 'MMM' | 'MMMM' | 'MMMMM' | The days header month format |
| daysHeaderYear | 'y' | 'yo' | 'yy' | 'yyy' | 'yyyy' | 'yyyyy' | The days header year format |