DateRangePicker API Overview

Initialization

<script>
  import { DateRangePicker } from "@svar-ui/svelte-core";
</script>

<!-- 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