<kendo:dateTimePicker>

A JSP wrapper for Kendo UI DateTimePicker.

Configuration Attributes

ARIATemplate `java.lang.String`

Specifies 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..

Example

<kendo:dateTimePicker ARIATemplate="ARIATemplate">
</kendo:dateTimePicker>

animation `boolean`

Configures the opening and closing animations of the popups. Setting the animation option to false will disable the opening and closing animations. As a result the popup will open and close instantly. is not a valid configuration. Further configuration is available via kendo:dateTimePicker-animation.

Example

<kendo:dateTimePicker animation="animation">
</kendo:dateTimePicker>

componentType `java.lang.String`

Specifies 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..

Example

<kendo:dateTimePicker componentType="componentType">
</kendo:dateTimePicker>

culture `java.lang.String`

Specifies the culture info used by the widget.

Example

<kendo:dateTimePicker culture="culture">
</kendo:dateTimePicker>

dateInput `boolean`

Specifies if the DateTimePicker will use DateInput for editing value

Example

<kendo:dateTimePicker dateInput="dateInput">
</kendo:dateTimePicker>

dates `java.lang.Object`

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.

Example

<kendo:dateTimePicker dates="dates">
</kendo:dateTimePicker>

depth `java.lang.String`

Specifies the navigation depth of the calendar. The following settings are available for the depth value: "month" - Shows the days of the month.; "year" - Shows the months of the year.; "decade" - Shows the years of the decade. or "century" - Shows the decades from the century..

Example

<kendo:dateTimePicker depth="depth">
</kendo:dateTimePicker>

fillMode `java.lang.String`

Sets a value controlling how the color is applied. Can also be set to the following string values: null; "solid"; "flat" or "outline".

Example

<kendo:dateTimePicker fillMode="fillMode">
</kendo:dateTimePicker>

footer `java.lang.String`

The template which renders the footer of the calendar. If false, the footer will not be rendered.

Example

<kendo:dateTimePicker footer="footer">
</kendo:dateTimePicker>

format `java.lang.String`

Specifies 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.

Example

<kendo:dateTimePicker format="format">
</kendo:dateTimePicker>

interval `float`

Specifies the interval, between values in the popup list, in minutes.

Example

<kendo:dateTimePicker interval="interval">
</kendo:dateTimePicker>

max `java.util.Date`

Specifies the maximum date, which the calendar can show.

Example

<kendo:dateTimePicker max="max">
</kendo:dateTimePicker>

min `java.util.Date`

Specifies the minimum date that the calendar can show.

Example

<kendo:dateTimePicker min="min">
</kendo:dateTimePicker>

parseFormats `java.lang.Object`

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.

Example

<kendo:dateTimePicker parseFormats="parseFormats">
</kendo:dateTimePicker>

rounded `java.lang.String`

Sets a value controlling the border radius. Can also be set to the following string values: null; "small"; "medium"; "large" or "full".

Example

<kendo:dateTimePicker rounded="rounded">
</kendo:dateTimePicker>

size `java.lang.String`

Sets a value controlling size of the component. Can also be set to the following string values: "small"; "medium"; "large" or null.

Example

<kendo:dateTimePicker size="size">
</kendo:dateTimePicker>

start `java.lang.String`

Specifies the start view of the calendar. The following settings are available for the start value: "month" - Shows the days of the month.; "year" - Shows the months of the year.; "decade" - Shows the years of the decade. or "century" - Shows the decades from the century..

Example

<kendo:dateTimePicker start="start">
</kendo:dateTimePicker>

timeFormat `java.lang.String`

Specifies the format, which is used to format the values in the time drop-down list.

Example

<kendo:dateTimePicker timeFormat="timeFormat">
</kendo:dateTimePicker>

value `java.util.Date`

Specifies the selected value.

Example

<kendo:dateTimePicker value="value">
</kendo:dateTimePicker>

weekNumber `boolean`

If 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.

Example

<kendo:dateTimePicker weekNumber="weekNumber">
</kendo:dateTimePicker>

Configuration JSP Tags

kendo:dateTimePicker-animation

More documentation is available at kendo:dateTimePicker-animation.

Example

<kendo:dateTimePicker>
    <kendo:dateTimePicker-animation></kendo:dateTimePicker-animation>
</kendo:dateTimePicker>

kendo:dateTimePicker-month

Templates for the cells rendered in the calendar "month" view.

More documentation is available at kendo:dateTimePicker-month.

Example

<kendo:dateTimePicker>
    <kendo:dateTimePicker-month></kendo:dateTimePicker-month>
</kendo:dateTimePicker>

The options that will be used for the popup initialization. For more details about the available options refer to Popup documentation.

More documentation is available at kendo:dateTimePicker-popup.

Example

<kendo:dateTimePicker>
    <kendo:dateTimePicker-popup></kendo:dateTimePicker-popup>
</kendo:dateTimePicker>

Event Attributes

change `String`

Triggered when the underlying value of a DateTimePicker is changed.

For additional information check the change event documentation.

Example

<kendo:dateTimePicker change="handle_change">
</kendo:dateTimePicker>
<script>
    function handle_change(e) {
        // Code to handle the change event.
    }
</script>

close `String`

Fires when the calendar or the time drop-down list is closed

For additional information check the close event documentation.

Example

<kendo:dateTimePicker close="handle_close">
</kendo:dateTimePicker>
<script>
    function handle_close(e) {
        // Code to handle the close event.
    }
</script>

open `String`

Fires when the calendar or the time drop-down list is opened

For additional information check the open event documentation.

Example

<kendo:dateTimePicker open="handle_open">
</kendo:dateTimePicker>
<script>
    function handle_open(e) {
        // Code to handle the open event.
    }
</script>

Event Tags

kendo:dateTimePicker-change

Triggered when the underlying value of a DateTimePicker is changed.

For additional information check the change event documentation.

Example

<kendo:dateTimePicker>
    <kendo:dateTimePicker-change>
        <script>
            function(e) {
                // Code to handle the change event.
            }
        </script>
    </kendo:dateTimePicker-change>
</kendo:dateTimePicker>

kendo:dateTimePicker-close

Fires when the calendar or the time drop-down list is closed

For additional information check the close event documentation.

Example

<kendo:dateTimePicker>
    <kendo:dateTimePicker-close>
        <script>
            function(e) {
                // Code to handle the close event.
            }
        </script>
    </kendo:dateTimePicker-close>
</kendo:dateTimePicker>

kendo:dateTimePicker-open

Fires when the calendar or the time drop-down list is opened

For additional information check the open event documentation.

Example

<kendo:dateTimePicker>
    <kendo:dateTimePicker-open>
        <script>
            function(e) {
                // Code to handle the open event.
            }
        </script>
    </kendo:dateTimePicker-open>
</kendo:dateTimePicker>

ARIATemplate java.lang.String

Example

animation boolean

Example

componentType java.lang.String

Example

culture java.lang.String

Example

dateInput boolean

Example

dates java.lang.Object

Example

depth java.lang.String

Example

fillMode java.lang.String

Example

footer java.lang.String

Example

format java.lang.String

Example

interval float

Example

max java.util.Date

Example

min java.util.Date

Example

parseFormats java.lang.Object

Example

rounded java.lang.String

Example

size java.lang.String

Example

start java.lang.String

Example

timeFormat java.lang.String

Example

value java.util.Date

Example

weekNumber boolean

Example

Example

Example

Example

change String

Example

close String

Example

open String

Example

Example

Example

Example

Was this article helpful?

Tell us how we can improve this article

Getting Started

Community

Frameworks

ARIATemplate `java.lang.String`

animation `boolean`

componentType `java.lang.String`

culture `java.lang.String`

dateInput `boolean`

dates `java.lang.Object`

depth `java.lang.String`

fillMode `java.lang.String`

footer `java.lang.String`

format `java.lang.String`

interval `float`

max `java.util.Date`

min `java.util.Date`

parseFormats `java.lang.Object`

rounded `java.lang.String`

size `java.lang.String`

start `java.lang.String`

timeFormat `java.lang.String`

value `java.util.Date`

weekNumber `boolean`

change `String`

close `String`

open `String`