The animation(s) used for opening and/or closing the pop-ups. Setting this value to false will disable the animation(s).

close: Object

The animation(s) used for hiding of the pop-up.

Example

$("#dateTimePicker").kendoDateTimePicker({
    animation: {
        close: {
            effects: "fadeOut",
            duration: 300,
            show: false,
            hide: true
        }
    }
});

open: Object

The animation(s) used for displaying of the pop-up.

Example

$("#dateTimePicker").kendoDateTimePicker({
    animation: {
        open: {
            effects: "fadeIn",
            duration: 300,
            show: true
        }
    }
});

Specifies the culture info used by the widget.

Example

// specify on widget initialization
$("#datetimepicker").kendoDateTimePicker({
    culture: "de-DE"
});

Specifies a list of dates, which are shown in the time drop-down list. If not set, the DateTimePicker will auto-generate the available times.

Example

$("#dateTimePicker").kendoDateTimePicker({
    dates: [new Date(2000, 10, 10, 10, 0, 0), new Date(2000, 10, 10, 30, 0)] //the drop-down list will consist only two entries - "10:00 AM" and "10:30 AM"
});

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
"century": shows the decades from the centery

Example

$("#dateTimePicker").kendoDateTimePicker({
    start: "decade",
    depth: "year" // the dateTimePicker will only go to the year level
});

Template to be used for rendering the footer of the calendar.

Example

// DateTimePicker initialization
 <script>
     $("#dateTimePicker").kendoDateTimePicker({
         footer: kendo.template("Today - #=kendo.toString(data, 'd') #")
     });
 </script>

Specifies the format, which is used to format the value of the DateTimePicker displayed in the input.

Example

$("#dateTimePicker").kendoDateTimePicker({
    format: "yyyy/MM/dd hh:mm tt"
});

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

Example

$("#dateTimePicker").kendoDateTimePicker({
    interval: 15
});

Specifies the maximum date, which the calendar can show.

Example

$("#dateTimePicker").kendoDateTimePicker({
 max: new Date(2013, 0, 1) // sets max date to Jan 1st, 2013 12:00 AM
});

Example

var dateTimePicker = $("#dateTimePicker").data("kendoDateTimePicker");
// set the max date to Jan 1st, 2013 12:00 AM
dateTimePicker.max(new Date(2013,0, 1));

Specifies the minimum date that the calendar can show.

Example

// set the min date to Jan 1st, 2011
$("#dateTimePicker").kendoDateTimePicker({
 min: new Date(2011, 0, 1)
});

Example

// get a reference to the dateTimePicker widget
var dateTimePicker = $("#dateTimePicker").data("kendoDateTimePicker");
// set the min date to Jan 1st, 2011 12:00 AM
dateTimePicker.min(new Date(2011, 0, 1));

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

content: String

Template to be used for rendering the cells in the calendar "month" view, which are in range.

Example

//template
<script id="cellTemplate" type="text/x-kendo-tmpl">
     <div class="${ data.value < 10 ? exhibition : party }">
     </div>
     ${ data.value }
 </script>

 //dateTimePicker initialization
 <script>
     $("#dateTimePicker").kendoDateTimePicker({
         month: {
            content:  kendo.template($("#cellTemplate").html()),
         }
     });
 </script>

empty: String

The template used for rendering the cells in the calendar "month" view, which are not in the range between the minimum and maximum values.

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.

Example

$("#datePicker").kendoDatePicker({
    format: "yyyy/MM/dd hh:mm tt",
    parseFormats: ["MMMM yyyy", "HH:mm"] //format also will be added to parseFormats
});

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
"century": shows the decades from the centery

Example

$("#dateTimePicker").kendoDateTimePicker({
    start: "decade" // the dateTimePicker will start with a decade display
});

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

Example

$("#dateTimePicker").kendoDateTimePicker({
    timeFormat: "HH:mm" //24 hours format
});

Specifies the selected value.

Example

// set the selected value to January 1st, 2011 12:00 AM
$("#dateTimePicker").kendoDateTimePicker({
 value: new Date(2011, 0, 1)
});

Example

// get a reference to the dateTimePicker widget
var dateTimePicker = $("#dateTimePicker").data("kendoDateTimePicker");
// set the selected value on the dateTimePicker to January 1st, 2011
dateTimePicker.value(new Date(2011, 0, 1));