Introduction
Getting Started
Vue 2 End of Support
Vue Wrappers End of Life
Native Components
- Animation
- Buttons
- Chartsupdated
- Conversational UI
- Data Tools
- Date Inputs
- - Overview
  - Calendar
  - DateInput
  - DatePicker
  - DateRangePicker
  - DateTimePicker
  - TimePicker
  - MultiView Calendar
  - Floating Labels
  - Globalization
  - API
- Dialogs
- Drawing
- Dropdowns
- Editor
- Excel Export
- File Saver
- Form
- Gauges
- Gridupdated
- Icons
- Indicators
- Inputsupdated
- Labels
- Layout
- ListBox
- ListView
- Notification
- PDF Processing
- Popup
- Progress Bars
- Scheduler
- ScrollView
- Tooltip
- TreeList
- TreeView
- Upload
Wrapper Components
Sample Applications
Styling & Themes
Common Features
Project Setup
Knowledge Base
Changelog
FAQ
Troubleshooting

Components / Date Inputs / API / DateTimePickerProps /

New to Kendo UI for Vue? Start a free 30-day trial

DateTimePickerProps

Represents the props of the Kendo UI for Vue DateTimePicker component.

Name	Type	Default	Description
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.
ariaLabelledBy?	`string`		Identifies the element(s) which will label the component.
calendar?	`any`		Enables the customization or the override of the default Calendar which is rendered by the DateTimePicker (see example).
cancelButton?	`boolean`		Determines whether to display the Cancel button in the popup.
dateInput?	`any`		Enables the customization or the override of the default DateInput which is rendered by the DateTimePicker (see example).
defaultShow?	`boolean`		Sets if the calendar popup is opened upon initial render. For more information, refer to the article on
defaultValue?	`Date`		Sets the default value of the DateTimePicker.
disabled?	`boolean`		Determines whether the DateTimePicker is disabled (see example).
fillMode?	`string`	`solid`	Configures the `fillMode` of the DateTimePicker. The available options are: solid outline flat link null—Does not set a fillMode `class`.
focusedDate?	`Date`		Specifies the initial focusedDate of the Calendar inside the DateTimePicker (see example).
format?	`string \| DateFormatOptions`		Specifies the date format that is used to display the input value (see example).
formatPlaceholder?	`DateInputFormatPlaceholder`		Defines the descriptions of the format sections in the input field (more information and examples).
id?	`string`		Specifies the `id` of the DateTimePicker.
label?	`string`		Renders a floating label for the DateTimePicker.
max?	`Date`		Specifies the greatest valid date (see example).
maxTime?	`Date`
min?	`Date`		Specifies the smallest valid date (see example).
minTime?	`Date`
name?	`string`		Specifies the `name` property of the `input` DOM element.
onBlur?	`(event: any) => void`		Fires each time any of the DateTimePicker elements gets blurred.
onChange?	`(event: DateTimePickerChangeEvent) => void`		Fires each time the user selects a new value
onFocus?	`(event: any) => void`		Fires each time the user focuses any of the DateTimePicker elements.
onIconclick?	`(event: any) => void`		Fires when the icon element is clicked.
placeholder?	`string`		Specifies the value of the placeholder.
popup?	`any`		Enables the customization or the override of the default Popup which is rendered by the DateTimePicker (see example).
popupSettings?	`object`		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`. `popupClass: String`—Specifies a list of CSS classes that are used to style the popup.
required?	`boolean`		Specifies if `null` is a valid value for the component.
rounded?	`string`	`medium`	Configures the `roundness` of the DateTimePicker. The available options are: small medium large circle full null—Does not set a rounded `class`.
show?	`boolean`		Specifies if the popup will be displayed (see example).
size?	`string`	`medium`	Configures the `size` of the DateTimePicker. The available options are: small medium large null—Does not set a size `class`.
steps?	`TimePickerIncrementalSteps`		Configures the incremental steps of the DateTimePicker. If the incremental step is greater than `1`, the Now button will be hidden.
tabIndex?	`number`		Sets the `tabIndex` property of the DateTimePicker.
title?	`string`		Sets the title of the `input` element of the DateTimePicker.
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 DateTimePicker.
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?	`Date`		Specifies the value of the DateTimePicker (see example). The `value` has to be a valid JavaScript `Date` instance.
weekNumber?	`boolean`		Determines whether to display a week number column of the Calendar inside the DateTimePicker (see example).
width?	`string \| number`		Specifies the width of the DateTimePicker.

DateTimePickerProps

In this article

Not finding the help you need?