Represents the props of the Kendo UI for Vue DateInput component. The generic argument is passed to the change property and is used as a target in the DateInputChangeEvent interface.

Name	Type	Default	Description
ariaControls?	`string`		Sets the aria-controls of the DateInput.
ariaDescribedBy?	`string`		Identifies the element(s) which will describe the component, similar to HTML aria-describedby attribute. For example these elements could contain error or hint message.
ariaExpanded?	`boolean`		Sets the aria-expanded of the DateInput.
ariaHasPopup?	`boolean`		Sets the aria-haspopup of the DateInput.
ariaLabel?	`string`		Sets the aria-label of the DateInput.
ariaLabelledBy?	`string`		Identifies the element(s) which will label the component.
ariaRole?	`string`		Sets the aria role of the DateInput.
defaultValue?	`"null" \| Date`		Specifies the default value of the DateInput. If `value` is not set, this value will correspond to the initial value.
dir?	`string`		Represents the `dir` HTML attribute.
disabled?	`boolean`		Determines whether the DateInput is disabled (see example).
fillMode?	`"null" \| string`	`solid`	Configures the `fillMode` of the DateInput. The available options are: solid outline flat link null—Does not set a fillMode `class`.
format?	`string \| DateFormatOptions`		Specifies the `date` format which is used for formatting the value (see example. If not set, the default format will be used.
formatPlaceholder?	`DateInputFormatPlaceholder`		Specifies the descriptions of the format sections in the input field (more information and example.
id?	`string`		Sets the `id` of the `input` DOM element.
label?	`string`		Renders a floating label for the DateInput.
max?	`Date`		Specifies the greatest date that is valid (see example.
maxTime?	`Date`		Specifies the greatest time that is valid (see example.
min?	`Date`		Specifies the smallest date that is valid (see example.
minTime?	`Date`		Specifies the smallest time that is valid (see example.
name?	`string`		Specifies the `name` property of the `input` DOM element.
placeholder?	`string`		Specifies the value of the placeholder.
required?	`boolean`		Specifies if `null` is a valid value for the component.
rounded?	`"null" \| string`	`medium`	Configures the `roundness` of the DateInput. The available options are: small medium large circle full null—Does not set a rounded `class`.
size?	`"null" \| string`	`medium`	Configures the `size` of the DateInput. The available options are: small medium large null—Does not set a size `class`.
spinners?	`boolean`		Specifies whether the Up and Down spin buttons will be rendered (see example).
steps?	`DateInputIncrementalSteps`		Specifies the incremental steps of the DateInput (see example. 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.
tabIndex?	`number`		Sets the `tabIndex` property of the DateInput.
title?	`string`		Sets the title of the `input` element of the DateInput.
valid?	`boolean`		Overrides the validity state of the component. If `valid` is set, the `required` property will be ignored.
validate?	`boolean`		Specifies the validate of the DateInput.
validationMessage?	`string`		Controls the form error message of the component. If set to an empty string, no error will be thrown.
validityStyles?	`boolean`		If set to `false`, no visual representation of the invalid state of the component will be applied.
value?	`"null" \| Date`		Specifies the value of the DateInput.
width?	`string \| number`		Specifies the width of the DateInput.

Methods

onChange

Determines the event handler that will be fired when the user edits the value (see example.

Parameters
event	`any`

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Extended Reality

Free Tools

DateInputProps

In this article

Not finding the help you need?

Getting Started

Support Resources

Community