1.1.1 • Published 4 years ago
react-primitive-datepicker v1.1.1
React primitive date picker
Simplest datepicker possible with modest amount of features and native behaviour on mobile devices. Easily customizable.
Here's DEMO!
Components props
| Name | Type | Default value | Description |
|---|---|---|---|
| value | Date | n/a | Javascript date object that will be date picker value |
| onChange | Function | n/a | Change handler that expects date object |
| placeholder | String | n/a | Input placeholder |
| locale | String | enUS | Locale that will be mapped in date-ins locale and used for date formatting and translations. List of all available locales. |
| customClassNames | Object | n/a | Object with classes that you can use to customize the element. List of properties you can find below. |
| customElements | Object | n/a | List of classes that you can use to customize the element. List of properties you can find below. |
customClassNames object
| Name | Type | Description |
|---|---|---|
| wrapper | String | General wrapper of all elements. A good place to pass your custom font or adjust text color of all elements. |
| dropdownWrapper | String | Wrapper of date picker dropdown where you can stylize |
| input | String | Input class. |
| inputFocused | String | Input class when it's focused. |
| placeholder | String | Input placeholder. |
| dateHeading | String | Date heading class in dropdown head between controls. |
| weekDay | String | Class of shortened week days above calendar. |
| dateItem | String | Class of every calendar item. You can adjust font-size of every element in here and dropdown will stretch accordingly. |
| dateItemSelected | String | Class of selected item. |
customElements object
| Name | Type | Description |
|---|---|---|
| decrementYearElement | { JSX element } | First left dropdown head control. |
| decrementMonthElement | { JSX element } | Second left dropdown head control. |
| incrementMonthElement | { JSX element } | First right dropdown head control. |
| incrementYearElement | { JSX element } | I Second right dropdown head control. |