animation: Object
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
        }
    }
});
depth: String
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
});
footer: Function
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>
format: String(default: MM/dd/yyyy)
Specifies the format, which is used to parse value set with value() method.

Example

$("#datePicker").kendoDatePicker({
    format: "yyyy/MM/dd"
});
max: Date(default: Date(2099, 11, 31))
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));
min: Date(default: Date(1900, 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));
month: Object
Templates for the cells rendered in the calendar "month" view.
content: Function
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">
     &lt;div class="${ data.value < 10 ? exhibition : party }"&gt;
     &lt;/div&gt;
     ${ data.value }
 &lt;/script&gt;

 //datePicker initialization
 &lt;script&gt;
     $("#datePicker").kendoDatePicker({
         month: {
            content:  kendo.template($("#cellTemplate").html()),
         }
     });
 &lt;/script&gt;
empty: Function
The template used for rendering the cells in the calendar "month" view, which are not in the range between the minimum and maximum values.
start: String(default: month)
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
});
value: Date(default: null)
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));