@progress/kendo-vue-dateinputs
Version:
163 lines (162 loc) • 6.92 kB
TypeScript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2026 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
import { DateRangePickerCalendarSettings } from './DateRangePickerCalendarSettings';
import { DateRangePickerDateInputSettings } from './DateRangePickerDateInputSettings';
import { DateRangePickerPopupSettings } from './DateRangePickerPopupSettings';
import { DateFormatOptions } from '@progress/kendo-vue-intl';
/**
* @hidden
*/
export interface DateRangePickerSettings {
/**
* Enables the customization or the override of the default start DateInput which is rendered by the DateRangePicker
* ([see example]({% slug custom_rendering_daterangepicker %}#toc-customizing-the-date-inputs)).
*/
startDateInput?: any;
/**
* Enables the customization or the override of the default end DateInput which is rendered by the DateRangePicker
* ([see example]({% slug custom_rendering_daterangepicker %}#toc-customizing-the-calendar)).
*/
endDateInput?: any;
/**
* Enables the customization or the override of the default Popup which is rendered by the DateRangePicker
* ([see example]({% slug custom_rendering_daterangepicker %}#toc-customizing-the-popup)).
*/
popup?: any;
/**
* Enables the customization or the override of the default Calendar which is rendered by the DateRangePicker.
*/
calendar?: any;
/**
* If `allowReverse` is set to `true`, the component skips the validation of whether the `from` value is after the `to` value ([see example]({% slug reverse_daterangepicker %})).
*
* > If the [`calendarSettings`](#toc-calendarsettings) property is set, its `allowReverse` will take precedence.
*/
allowReverse?: boolean;
/**
* Represents the additional props that can be passed to the [MultiViewCalendar]({% slug multipleviews_calendar %}) inside the DateRangePicker ([see example]({% slug child_settings_daterangepicker %}#toc-configuring-the-calendar)).
*/
calendarSettings?: DateRangePickerCalendarSettings;
/**
* Sets the default state of the DateRangePicker upon render ([see example]({% slug default_value_daterangepicker %})).
*/
defaultShow?: boolean;
/**
* Determines whether the DateRangePicker is disabled ([see example]({% slug disabled_daterangepicker %})).
*/
disabled?: boolean;
/**
* Represents the additional props that can be passed to the end-date [DateInput]({% slug overview_dateinput %}) inside the DateRangePicker ([see example]({% slug child_settings_daterangepicker %}#toc-configuring-dateinputs)).
*/
endDateInputSettings?: DateRangePickerDateInputSettings;
/**
* Specifies the focused date of the DateRangePicker ([see example]({% slug focused_daterangepicker %})).
*/
focusedDate?: Date;
/**
* Specifies the `date` format which is used for formatting the value of the DateInput ([see example]({% slug formats_dateinput %})).
*
* > If [`startDateInputSettings`](#toc-startdateinputsettings) or [`endDateInputSettings`](#toc-enddateinputsettings) are set, their `format` will take precedence.
*/
format?: string | DateFormatOptions;
/**
* Specifies the `id` of the DateRangePicker.
*/
id?: string;
/**
* Identifies the element(s) which will describe the component, similar to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
* For example these elements could contain error or hint message.
*/
ariaDescribedBy?: string;
/**
* Identifies the element(s) which will label the component.
*/
ariaLabelledBy?: string;
/**
* Specifies the greatest valid date ([see example]({% slug dateranges_daterangepicker %})).
*/
max?: Date;
/**
* Specifies the smallest valid date ([see example]({% slug dateranges_daterangepicker %})).
*/
min?: Date;
/**
* Configures the `size` of the DateRangePicker.
*
* The available options are:
* - small
* - medium
* - large
* - null—Does not set a size `class`.
*
* @default `medium`
*/
size?: null | 'small' | 'medium' | 'large';
/**
* Configures the `roundness` of the DateRangePicker.
*
* The available options are:
* - small
* - medium
* - large
* - circle
* - full
* - null—Does not set a rounded `class`.
*
* @default `medium`
*/
rounded?: null | 'small' | 'medium' | 'large' | 'full' | string;
/**
* Configures the `fillMode` of the DateRangePicker.
*
* The available options are:
* - solid
* - outline
* - flat
* - link
* - null—Does not set a fillMode `class`.
*
* @default `solid`
*/
fillMode?: null | 'solid' | 'outline' | 'flat' | string;
/**
* Fires each time any of the DateRangePicker elements gets blurred.
*/
onBlur?: (event: any) => void;
/**
* Fires each time the user focuses any of the DateRangePicker elements.
*/
onFocus?: (event: any) => void;
/**
* Represents the additional props that will be passed to the [Popup]({% slug overview_popup %}) inside the DateRangePicker ([see example]({% slug child_settings_daterangepicker %}#toc-configuring-the-popup)).
*/
popupSettings?: DateRangePickerPopupSettings;
/**
* Specifies if the calendar will be displayed ([see example]({% slug controlled_daterangepicker %}#toc-controlling-the-popup-state)).
*/
show?: boolean;
/**
* Represents the additional props that will be passed to the start-date [DateInput]({% slug overview_dateinput %}) inside the DateRangePicker ([see example]({% slug child_settings_daterangepicker %}#toc-configuring-dateinputs)).
*/
startDateInputSettings?: DateRangePickerDateInputSettings;
/**
* Determines whether the DateRangePicker will display a **Swap Value** button ([see example]({% slug reverse_daterangepicker %}#toc-swapping-start-and-end-dates-in-ranges)).
*
* > The DateRangePicker will display the swap button only if the [`allowReverse`](#toc-allowreverse) property is also set to `true`.
*/
swapButton?: boolean;
/**
* Sets the `tabIndex` property of the DatePicker.
*/
tabIndex?: number;
/**
* Sets the built-in HTML attributes of the inner focusable input element.
* Attributes which are essential for certain component functionalities cannot be changed.
*/
inputAttributes?: Object;
}