Customization
React-Calendar-DateTime-Picker is very customizable; one can change any label or style that they need. Here is a list of props that can be used to customize the calendar:
| Property | Type | Default | Description |
|---|---|---|---|
| placeholder | string | "select" | To change input date picker placeholder |
| inputClass | string | To change calendar's input style | |
| clearBtnClass | string | To change calendar's clear button style | |
| calenderModalClass | string | To change calendar's main modal style | |
| headerClass | string | To change calendar's green header style | |
| timeClass | string | To change calendar's time view style | |
| daysClass | string | To change calendar's days view style | |
| monthsClass | string | To change calendar's months view style | |
| yearsClass | string | To change calendar's years view style | |
| NextBtnIcon | svg as component | ">" | To change next month button icon. |
| PreviousBtnIcon | svg as component | "<" | To change previous month button icon. |
| nextMonthBtnTitle | string | "next" | To change next month button title(shows by hover). |
| previousMonthBtnTitle | string | "previous" | To change previous month button title(shows by hover). |
| fromLabel | string | "from" | Starting date label in input result(works only in range type). |
| toLabel | string | "to" | Ending date label in input result(works only in range type). |
| clockFromLabel | string | "from" | Title for starting time in the time component(works only in range type). |
| clockToLabel | string | "to" | Title for ending time in the time component(works only in range type). |
| clockLabel | string | "clock" | Label for time in the time component(works in single and range type). |