Date Picker
The DatePicker component is a user-friendly and customizable calendar input designed for selecting a single date.
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 DateRangePicker from '@start-base/react-form-elements/DateRangePicker';Usages
API
This component combined with Calendar component and Select component. All props from Calendar component and Select can be passed to this component. The Calendar 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 |
| disableShrink | boolean | false | Position the label outside of the input |
| value | string or number | Value of the input | |
| onChange | function | Callback function that is fired when the value changes. | |
| inputClassName | string | null | Classname for input element |
| labelClassName | string | null | Classname for label element |
| errorClassName | string | null | Classname for error element |
| prepend | string or element | null | Prepend text to the input |
| append | string or element | null | Append text to the input |
| appendClassName | string | null | Classname for append element |
| prependClassName | string | null | Classname for prepend 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. |
| value | object | "" | to - from object |
| locale | object | null | date-fns locale object |
| format | string | MM/dd/yyyy | Date format |
| calendarClassName | string | null | Classname for calendar element |
| numberOfMonths | number | 2 | Calender count to show date selection popup |
| separator | string | " / " | Separator for dates on showing input |