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

close: Object

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

Example

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

open: Object

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

Example

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

Specifies the culture info used by the widget.

Example

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

Specifies the navigation depth. 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

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

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

Example

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

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

Example

$("#datePicker").kendoDatePicker({
    format: "yyyy/MM/dd"
});

Specifies the maximum date, which the calendar can show.

Example

$("#datePicker").kendoDatePicker({
 max: new Date(2013, 0, 1) // sets max date to Jan 1st, 2013
});

Example

var datePicker = $("#datePicker").data("kendoDatePicker");
// set the max date to Jan 1st, 2013
datePicker.max(new Date(2013,0, 1));

Specifies the minimum date that the calendar can show.

Example

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

Example

// get a reference to the datePicker widget
var datePicker = $("#datePicker").data("kendoDatePicker");
// set the min date to Jan 1st, 2011
datePicker.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>

 //datePicker initialization
 <script>
     $("#datePicker").kendoDatePicker({
         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 format will be used.

Example

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

Specifies the start view. 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

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

Specifies the selected date.

Example

// set the selected value to January 1st, 2011
$("#datePicker").kendoDatePicker({
 value: new Date(2011, 0, 1)
});

Example

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