Calendar
A calendar component that shows date as a picker
Installation
Install the package
npm i @start-base/react-form-elementsAdd the styles
To use the React form elements styles in a Next.js project, import the styles in your layout.tsx file.
app/layout.tsx
import "@start-base/react-form-elements/styles.css";Import the component
import Calendar from '@start-base/react-form-elements/Calendar';Usages
December 2024
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
API
This component is a wrapper around react-day-picker (opens in a new tab) DayPicker component. All props from DayPicker API Reference (opens in a new tab) can be passed to this component.
| Name | Type | Default | Description |
|---|---|---|---|
| name | string | Name of the input | |
| label | string | null | Label of the input |
| placeholder | string | null | Placeholder of the input |
| value | string or number | Value of the input | |
| onChange | function | Callback function that is fired when the value changes. | |
| labelClassName | string | null | Classname for label element |
| errorClassName | string | null | Classname for error element |
| disabled | boolean | false | Disable the input |
| error | string or boolean or object | null | Error message to display below the input. if value is a boolean input border will be change. Also you can pass schema validator error objects. |
| calendarClassName | string | null | Classname for calendar element |