@progress/kendo-vue-dateinputs
Version:
161 lines (160 loc) • 5.32 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 './format-placeholder';
import { DateInputIncrementalSteps } from './incremental-steps';
import { DateFormatOptions } from '@progress/kendo-vue-intl';
/**
* @hidden
*/
export interface DateInputSettings {
/**
* Specifies the `date` format which is used for formatting the value ([see example]({% slug formats_dateinput %}). If not set, the default format will be used.
*/
format?: string | DateFormatOptions;
/**
* Specifies the descriptions of the format sections in the input field ([more information and example]({% slug placeholders_dateinput %}).
*/
formatPlaceholder?: DateInputFormatPlaceholder;
/**
* Specifies the width of the DateInput.
*/
width?: number | string;
/**
* Configures the `size` of the DateInput.
*
* 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 DateInput.
*
* 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 DateInput.
*
* The available options are:
* - solid
* - outline
* - flat
* - link
* - null—Does not set a fillMode `class`.
*
* @default `solid`
*/
fillMode?: null | 'solid' | 'outline' | 'flat' | string;
/**
* Sets the `tabIndex` property of the DateInput.
*/
tabIndex?: number;
/**
* Sets the title of the `input` element of the DateInput.
*/
title?: string;
/**
* Sets the aria-label of the DateInput.
*/
ariaLabel?: string;
/**
* Sets the aria role of the DateInput.
*/
ariaRole?: string;
/**
* Sets the aria-controls of the DateInput.
*/
ariaControls?: string;
/**
* Sets the aria-haspopup of the DateInput.
*/
ariaHasPopup?: String;
/**
* Sets the aria-expanded of the DateInput.
*/
ariaExpanded?: boolean;
/**
* Specifies the incremental steps of the DateInput ([see example]({% slug incrementalsteps_dateinput %}).
*
* The available options are:
* - `year: Number`—Controls the incremental step of the year value.
* - `month: Number`—Controls the incremental step of the month value.
* - `day: Number`—Controls the incremental step of the day value.
* - `hour: Number`—Controls the incremental step of the hour value.
* - `minute: Number`—Controls the incremental step of the minute value.
* - `second: Number`—Controls the incremental step of the second value.
*/
steps?: DateInputIncrementalSteps;
/**
* Specifies the smallest date that is valid ([see example]({% slug dateranges_dateinput %}).
*/
min?: Date;
/**
* Specifies the greatest date that is valid ([see example]({% slug dateranges_dateinput %}).
*/
max?: Date;
/**
* Specifies the smallest time that is valid ([see example]({% slug dateranges_dateinput %}#toc-limiting-the-time-range).
*/
minTime?: Date;
/**
* Specifies the greatest time that is valid ([see example]({% slug dateranges_dateinput %}#toc-limiting-the-time-range).
*/
maxTime?: Date;
/**
* Determines whether the DateInput is disabled ([see example]({% slug disabled_dateinput %})).
*/
disabled?: boolean;
/**
* Specifies whether the **Up** and **Down** spin buttons will be rendered ([see example]({% slug spinbuttons_dateinput %})).
*/
spinners?: boolean;
/**
* Specifies the name property of the input DOM element.
*/
name?: string;
/**
* Represents the `dir` HTML attribute.
*/
dir?: string;
/**
* Renders a floating label for the DateInput.
*/
label?: string;
/**
* Sets the `id` of the `input` DOM element.
*/
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;
/**
* 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;
}