DateRangePicker API Overview
Initialization
import { DateRangePicker } from "@svar-ui/react-core";
// minimal configuration for initialization
<DateRangePicker />
tip
- Visit the Features Guide to learn more about the control's functionality.
- Explore the samples to visualize the available features.
DateRangePicker Properties
| align | Optional. Defines how the dropdown is aligned horizontally relative to the input field |
| buttons | Optoional. Shows/hides the Today and Clear buttons in the lower part of the popup with calendars |
| clear | Optional. Adds the Clear button into the input |
| css | Optional. Changes the position of the icon in the input |
| disabled | Optional. Defines whether a date range picker is disabled |
| editable | Optional. Defines whether a date range picker is editable or sets a custom format for editing dates |
| error | Optional. Defines whether error styling is applied to a date range picker |
| format | Optional. Sets the date format for a date range picker input |
| id | Optional. Sets an HTML id for a date range picker |
| months | Optional. Sets the number of calendars in DateRangePicker |
| placeholder | Optional. Sets the text of the input's placeholder |
| title | Optional. Sets a tooltip text with additional info about the control |
| value | Optional. Sets the value of a date range picker |
| width | Optional. Sets the width of a popup with calendars |
DatePicker Events
| change | Fires when a new option is selected in a date range picker |