UNPKG

@progress/kendo-vue-dateinputs

Version:
163 lines (162 loc) 6.92 kB
/** * @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; }