@progress/kendo-vue-dateinputs
Version:
200 lines (199 loc) • 6.77 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 { DateInputFormatPlaceholder } from '../../dateinput/models/format-placeholder';
import { DateFormatOptions } from '@progress/kendo-vue-intl';
import { TimePickerIncrementalSteps } from '../../timepicker/models/main';
/**
* @hidden
*/
export interface DateTimePickerSettings {
/**
* Enables the customization or the override of the default Calendar which is rendered by the DateTimePicker
* ([see example]({% slug custom_rendering_datetimepicker %}#toc-customizing-the-calendar)).
*/
calendar?: any;
/**
* Enables the customization or the override of the default Popup which is rendered by the DateTimePicker
* ([see example]({% slug custom_rendering_datetimepicker %}#toc-customizing-the-popup)).
*/
popup?: any;
/**
* Enables the customization or the override of the default DateInput which is rendered by the DateTimePicker
* ([see example]({% slug custom_rendering_datetimepicker %}#toc-customizing-the-dateinput)).
*/
dateInput?: any;
/**
* Sets if the calendar popup is opened upon initial render.
* For more information, refer to the article on
*/
defaultShow?: boolean;
/**
* Determines whether the DateTimePicker is disabled
* ([see example]({% slug disabled_datetimepicker %})).
*/
disabled?: boolean;
/**
* Specifies the initial focusedDate of the Calendar inside the DateTimePicker
* ([see example]({% slug dates_datetimepicker %})).
*/
focusedDate?: Date;
/**
* Specifies the date format that is used to display the input value
* ([see example]({% slug formats_datetimepicker %})).
*/
format?: string | DateFormatOptions;
/**
* Defines the descriptions of the format sections in the input field
* ([more information and examples]({% slug placeholders_datetimepicker %})).
*/
formatPlaceholder?: DateInputFormatPlaceholder;
/**
* Specifies the `id` of the DateTimePicker.
*/
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_datetimepicker %})).
*/
max?: Date;
/**
* Specifies the smallest valid date
* ([see example]({% slug dateranges_datetimepicker %})).
*/
min?: Date;
minTime?: Date;
maxTime?: Date;
/**
* Configures the `size` of the DateTimePicker.
*
* 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 DateTimePicker.
*
* 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 DateTimePicker.
*
* The available options are:
* - solid
* - outline
* - flat
* - link
* - null—Does not set a fillMode `class`.
*
* @default `solid`
*/
fillMode?: null | 'solid' | 'outline' | 'flat' | string;
/**
* Specifies the `name` property of the `input` DOM element.
*/
name?: string;
/**
* Renders a floating label for the DateTimePicker.
*/
label?: string;
/**
* Specifies the value of the placeholder.
*/
placeholder?: string;
/**
* Configures the popup options of the DateTimePicker.
*
* The available options are:
* - `animate: Boolean`—Controls the popup animation. By default, the open and close animations are enabled.
* - `appendTo:`— Defines the container to which the Popup will
* be appended. Defaults to [`body`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body).
* - `popupClass: String`—Specifies a list of CSS classes that are used to style the popup.
*/
popupSettings?: object;
/**
* Fires each time any of the DateTimePicker elements gets blurred.
*/
onBlur?: (event: any) => void;
/**
* Fires each time the user focuses any of the DateTimePicker elements.
*/
onFocus?: (event: any) => void;
/**
* Fires when the icon element is clicked.
*/
onIconclick?: (event: any) => void;
/**
* Specifies if the popup will be displayed
* ([see example]({% slug controlled_datetimepicker %}#toc-controlling-the-popup-state)).
*/
show?: boolean;
/**
* Sets the `tabIndex` property of the DateTimePicker.
*/
tabIndex?: number;
/**
* Sets the title of the `input` element of the DateTimePicker.
*/
title?: string;
/**
* Configures the incremental steps of the DateTimePicker.
*
* > If the incremental step is greater than `1`, the **Now** button will be hidden.
*/
steps?: TimePickerIncrementalSteps;
/**
* Determines whether to display a week number column of the Calendar inside the DateTimePicker
* ([see example]({% slug weeksnumbers_calendar %})).
*/
weekNumber?: boolean;
/**
* Specifies the width of the DateTimePicker.
*/
width?: number | string;
/**
* Determines whether to display the **Cancel** button in the popup.
*/
cancelButton?: boolean;
/**
* Specifies the validate of the DateTimePicker.
*/
validate?: boolean;
/**
* Controls the form error message of the component. If set to an empty string, no error will be thrown.
*
*/
validationMessage?: string;
/**
* 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;
}