Skip to main content

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

alignOptional. Defines how the dropdown is aligned horizontally relative to the input field
buttonsOptoional. Shows/hides the Today and Clear buttons in the lower part of the popup with calendars
clearOptional. Adds the Clear button into the input
cssOptional. Changes the position of the icon in the input
disabledOptional. Defines whether a date range picker is disabled
editableOptional. Defines whether a date range picker is editable or sets a custom format for editing dates
errorOptional. Defines whether error styling is applied to a date range picker
formatOptional. Sets the date format for a date range picker input
idOptional. Sets an HTML id for a date range picker
monthsOptional. Sets the number of calendars in DateRangePicker
placeholderOptional. Sets the text of the input's placeholder
titleOptional. Sets a tooltip text with additional info about the control
valueOptional. Sets the value of a date range picker
widthOptional. Sets the width of a popup with calendars

DatePicker Events

changeFires when a new option is selected in a date range picker