Skip to main content

DatePicker API Overview

Initialization

import { DatePicker } from "@svar-ui/react-core";

// minimal configuration for initialization
<DatePicker />
tip
  • Visit the Features Guide to learn more about the control's functionality.
  • Explore the samples to visualize the available features.

DatePicker Properties

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

DatePicker Events

changeOptional. Fires when a new date is selected in a date picker