Datepicker
Import
import { VKDatepicker } from "@vivakits/react-components";Title
A date picker component with range and presets.
Limit Date range
Limit the range of available dates by using minDate and maxDate.
Date Format
We can set the date format by format. refer to dayjs#format
Multiple Date Selection
Multiple selections. Allowing for multiple date selections.
Icon
Custom prefix and suffixIcon.
Import
import { VKRangePicker } from "@vivakits/react-components";Basic Date Range Picker
A simple date picker component that has a range
Disabled Specific Dates
Use disabledDates to make a particular date disable.
Limit Date range
Use minDate and maxDate to restrict the range of available dates.
API Reference
| Attribute | Type | Description | Default |
|---|---|---|---|
| value | date | date[] | null | To set date | - |
| onChange | function({ date: Date | Date[], dateString: string }) | Callback function, can be executed when the selected date is changing | - |
| minDate | date | The minimum date | - |
| maxDate | date | The maximum date | - |
| format | string | To set the date format, support multi-format matching when it is an array, display the first one shall prevail. refer to dayjs#format (opens in a new tab). for example: Custom Format | DD-MM-YYYY |
| multiple | boolean | Enable multiple date selection | false |
| icon | ReactNode | Set Calendar Icon | - |
| iconPosition | start end | Icon Position | start |
| placeholder | string | The placeholder of date input | - |
| color | primarysecondarysuccessdangerwarningdarklight | Optional. Theme color of the date picker. | - |
| rounded | defaultnonexssmmdlgfull | Optional. Border radius of the date picker. | - |
| size | smmdlgxl | Optional. Size of the date picker. | - |
| variant | solidoutline | Optional | - |
Date Range API Reference
| Attribute | Type | Description | Default |
|---|---|---|---|
| startDate | date | null | To set start date | - |
| endDate | date | null | To set end date | - |
| onChange | function({ startDate: Date | null, endDate: Date | null }) | Callback function, can be executed when the selected date range is changing | - |
| disabledDates | date[] | To disable certain dates | - |
| minDate | date | The minimum date | - |
| maxDate | date | The maximum date | - |
| format | string | To set the date format, support multi-format matching when it is an array, display the first one shall prevail. refer to dayjs#format (opens in a new tab). for example: Custom Format | DD-MM-YYYY |
| icon | ReactNode | Set Calendar Icon | - |
| iconPosition | start end | Icon Position | start |
| placeholder | string | The placeholder of date input | - |
| color | primarysecondarysuccessdangerwarningdarklight | Optional. Theme color of the date picker. | - |
| rounded | defaultnonexssmmdlgfull | Optional. Border radius of the date picker. | - |
| size | smmdlgxl | Optional. Size of the date picker. | - |
| variant | solidoutline | Optional | - |