DateTimePicker

Example

Razor
<kendo-datetimepicker>
    <animation></animation>
    <interval-settings></interval-settings>
    <label />
    <messages />
    <month-template></month-template>
    <popup></popup>
</kendo-datetimepicker>

ChildTags

Attributes

AttributeTypeDescription
nameStringSets the name of the component.
adaptive-modeAdaptiveModeSpecifies the adaptive rendering of the component.
adaptive-subtitleStringAllows customization of the subtitle's text in the adaptive view of the component.
adaptive-titleStringAllows customization of the title's text in the adaptive view of the component.
aria-templateStringSpecifies a template used to populate value of the aria-label attribute of the currently focused cell of the calendar. The parameters available for the template are: current - The current focused date.; valueType - The focused item value type - month, year and etc. or text - A text representing the focused value..
aria-template-handlerStringSpecifies a template used to populate value of the aria-label attribute of the currently focused cell of the calendar. The parameters available for the template are: current - The current focused date.; valueType - The focused item value type - month, year and etc. or text - A text representing the focused value..
aria-template-idStringSpecifies a template used to populate value of the aria-label attribute of the currently focused cell of the calendar. The parameters available for the template are: current - The current focused date.; valueType - The focused item value type - month, year and etc. or text - A text representing the focused value..
aria-template-viewIHtmlContentSpecifies a template used to populate value of the aria-label attribute of the currently focused cell of the calendar. The parameters available for the template are: current - The current focused date.; valueType - The focused item value type - month, year and etc. or text - A text representing the focused value..
as-moduleBoolean
auto-adjustBooleanIf this property is enabled and you have configured min and/or max values, and the user enters a value that falls out of that range, the value will automatically be set to either the minimum or maximum allowed value. This property has effect only when the dateInput of the component is enabled.
auto-correct-partsBooleanSets a value that indicates whether to automatically correct the segment when out of range. In order to work, dateInput prop should be set to true.
component-typeStringSpecifies the component type of the widget. "classic" - Uses the standard rendering of the widget. or "modern" - Uses new rendering with a fresh and modern look and feel..
cultureStringSpecifies the culture info used by the widget.
date-inputBooleanSpecifies if the DateTimePicker will use DateInput for editing value
datesDateTime[]Specifies a list of dates, which will be passed to the month template of the DateView. All dates, which match the date portion of the selected date will be used to re-bind the TimeView.
disable-datesDateTime[]An array or function that will be used to determine which dates to be disabled for selection by the widget.
end-timeDateTimeIf set, specifies the latest time the TimeView can show.
fill-modeFillModeSets a value controlling how the color is applied.
footerStringThe template which renders the footer of the calendar. If false, the footer will not be rendered.
is-in-client-templateBooleanWhen placing a Tag Helper within a Kendo Template, set the type to text/html and add the is-in-client-template="true" attribute.
depthCalendarViewSpecifies the navigation depth.
disable-dates-handlerStringThue function that will be used to determine which dates to be disabled in the calendar.
forModelExpressionAn expression to be evaluated against the current model.
formatStringSpecifies the format, which is used to format the value of the DateTimePicker displayed in the input. The format also will be used to parse the input.For more information on date and time formats please refer to Date Formatting.
input-modeStringSpecifies the inputmode attribute of the inner <input /> element. It is used to specify the type of on-screen keyboard that should be displayed when the user focuses the input.
deferredBooleanSuppress initialization script rendering. Note that this options should be used in conjunction with DeferredScripts method.
intervalDoubleSpecifies the interval between values in the popup list. When the componentType is set to classic, the interval is specified in minutes (numeric values). or When the componentType is set to modern, the interval is specified as an object of hours, minutes and seconds..
maxDateTimeSpecifies the maximum date, which the calendar can show.
minDateTimeSpecifies the minimum date that the calendar can show.
on-changeStringTriggered when the underlying value of a DateTimePicker is changed.
on-closeStringFires when the calendar or the time drop-down list is closed
on-openStringFires when the calendar or the time drop-down list is opened
parse-formatsString[]Specifies the formats, which are used to parse the value set with value() method or by direct input. If not set the value of the options.format and options.timeFormat will be used. Note that value of the format option is always used. The timeFormat value also will be used if defined.
roundedRoundedSets a value controlling the border radius.
script-attributesIDictionary<String,Object>
sizeComponentSizeSets the size of the component.
startCalendarViewIf set, specifies the earliest time the TimeView can show.
start-timeDateTimeIf set, specifies the earliest time the TimeView can show.
time-formatStringSpecifies the format, which is used to format the values in the time drop-down list.
valueDateTimeSpecifies the selected value.
week-numberBooleanIf set to true a week of the year will be shown on the left side of the calendar. It is possible to define a template in order to customize what will be displayed.
In this article
ExampleChildTagsAttributes
Not finding the help you need?
Contact Support