| title | page_title | description |
|---|---|---|
DatePicker |
Configuration, methods and events of Kendo UI DatePicker |
Easy to follow steps guide how to quickly configure DatePicker UI widget, easily enable/disable it using methods and how to change events. |
Represents the Kendo UI DatePicker widget. Inherits from Widget.
Configures the opening and closing animations of the calendar popup. Setting the animation option to false will disable the opening and closing animations. As a result the calendar popup will open and close instantly.
<input id="datepicker" />
<script>
$("#datepicker").kendoDatePicker({
animation: false
});
</script>
<input id="datepicker" />
<script>
$("#datepicker").kendoDatePicker({
animation: {
close: {
effects: "fadeOut zoom:out",
duration: 300
},
open: {
effects: "fadeIn zoom:in",
duration: 300
}
}
});
</script>
The animation played when the calendar popup is closed.
<input id="datepicker" />
<script>
$("#datepicker").kendoDatePicker({
animation: {
close: {
effects: "zoom:out",
duration: 300
}
}
});
</script>
The effect(s) to use when playing the close animation. Multiple effects should be separated with a space.
Complete list of available animations
The duration of the close animation in milliseconds.
The animation played when the calendar popup is opened.
<input id="datepicker" />
<script>
$("#datepicker").kendoDatePicker({
animation: {
open: {
effects: "zoom:in",
duration: 300
}
}
});
</script>
The effect(s) to use when playing the open animation. Multiple effects should be separated with a space.
Complete list of available animations
The duration of the open animation in milliseconds.
Specifies a template used to populate value of the aria-label attribute.
<input id="datepicker" />
<script>
$("#datepicker").kendoDatePicker({
ARIATemplate: "Date: #=kendo.toString(data.current, 'G')#"
});
</script>
Specifies the culture info used by the widget.
<!--
TODO: Add the kendo.culture.de-DE.min.js file as it is required!
Here is a sample script tag:
<script src="http://kendo.cdn.telerik.com/{kendo version}/js/cultures/kendo.culture.de-DE.min.js"></script>
For more information check this help topic:
http://docs.telerik.com/kendo-ui/framework/globalization/overview
-->
<input id="datepicker" />
<script>
$("#datepicker").kendoDatePicker({
culture: "de-DE"
});
</script>
Specifies a list of dates, which will be passed to the month template.
<input id="datepicker" />
<script>
$("#datepicker").kendoDatePicker({
value: new Date(2000, 10, 1),
dates: [
new Date(2000, 10, 10, 10, 0, 0),
new Date(2000, 10, 30)
] //can manipulate month template depending on this array.
});
</script>
Specifies the navigation depth. The following settings are available for the depth value:
shows the days of the month
shows the months of the year
shows the years of the decade
shows the decades from the century
Note the option will not be applied if start option is lower than depth. Always set both and start and depth options.
<input id="datepicker"/>
<script>
$("#datepicker").kendoDatePicker({
depth: "year"
});
</script>
The template which renders the footer of the calendar. If false, the footer will not be rendered.
<input id="datepicker" />
<script id="footer-template" type="text/x-kendo-template">
Today - #: kendo.toString(data, "d") #
</script>
<script>
$("#datepicker").kendoDatePicker({
footer: kendo.template($("#footer-template").html())
});
</script>
<input id="datepicker" />
<script>
$("#datepicker").kendoDatePicker({
footer: "Today - #: kendo.toString(data, 'd') #"
});
</script>
Specifies the format, which is used to format the value of the DatePicker displayed in the input. The format also will be used to parse the input.
<input id="datepicker" />
<script>
$("#datepicker").kendoDatePicker({
format: "yyyy/MM/dd"
});
</script>
Specifies the maximum date, which the calendar can show.
<input id="datepicker" />
<script>
$("#datepicker").kendoDatePicker({
max: new Date(2013, 0, 1) // sets max date to Jan 1st, 2013
});
</script>
Specifies the minimum date that the calendar can show.
<input id="datepicker" />
<script>
$("#datepicker").kendoDatePicker({
min: new Date(2011, 0, 1) // sets min date to Jan 1st, 2011
});
</script>
Templates for the cells rendered in the calendar "month" view.
The template to be used for rendering the cells in "month" view, which are between the min/max range.
<input id="datepicker" />
<script id="cell-template" type="text/x-kendo-template">
<div class="#= data.value < 10 ? 'exhibition' : 'party' #"></div>
#= data.value #
</script>
<script>
$("#datepicker").kendoDatePicker({
month: {
content: $("#cell-template").html()
}
});
</script>
The template used for rendering cells in the "month" view, which are outside the min/max range.
<input id="datepicker1" />
<script>
$("#datepicker1").kendoDatePicker({
month: {
empty: '-'
}
});
</script>
<input id="datepicker2" />
<script>
$("#datepicker2").kendoDatePicker({
month: {
empty: '<span style="color:\\#ccc;padding:0 .45em 0 .1em;">#= data.value #</span>'
}
});
</script>
Specifies a list of date formats used to parse the value set with value() method or by direct user input. If not set the value of the format will be used.
Note that the format option is always used during parsing.
The order of the provided parse formats is important and it should go from more strict to less strict.
<input id="datepicker" />
<script>
$("#datepicker").kendoDatePicker({
format: "yyyy/MM/dd",
parseFormats: ["MMMM yyyy"] //format also will be added to parseFormats
});
</script>
Specifies the start view. The following settings are available for the start value:
shows the days of the month
shows the months of the year
shows the years of the decade
shows the decades from the century
<input id="datepicker" />
<script>
$("#datepicker").kendoDatePicker({
start: "year"
});
</script>
Specifies the selected date.
<input id="datepicker" />
<script>
$("#datepicker").kendoDatePicker({
value: new Date(2011, 0, 1)
});
</script>
An object, which holds the options of the widget.
<input id="datepicker" />
<script>
$("#datepicker").kendoDatePicker();
var datepicker = $("#datepicker").data("kendoDatePicker");
var options = datepicker.options;
<script>
Closes the calendar.
<input id="datepicker" />
<button id="close">Close</button>
<script>
$("#datepicker").kendoDatePicker();
var datepicker = $("#datepicker").data("kendoDatePicker");
$("#close").click(function() {
datepicker.close();
});
</script>
Prepares the DatePicker for safe removal from DOM. Detaches all event handlers and removes jQuery.data attributes to avoid memory leaks. Calls destroy method of any child Kendo widgets.
Important: This method does not remove the DatePicker element from DOM.
<input id="datepicker" />
<script>
$("#datepicker").kendoDatePicker();
var datepicker = $("#datepicker").data("kendoDatePicker");
// detach events
datepicker.destroy();
</script>
Enable/Disable the DatePicker widget.
The argument, which defines whether to enable/disable the DatePicker.
<input id="datepicker" />
<script>
$("#datepicker").kendoDatePicker();
var datepicker = $("#datepicker").data("kendoDatePicker");
datepicker.enable(false);
</script>
<input id="datepicker" />
<script>
$("#datepicker").kendoDatePicker();
var datepicker = $("#datepicker").data("kendoDatePicker");
datepicker.enable(true);
</script>
Toggles the readonly state of the widget. When the widget is readonly it doesn't allow user input.
There is a difference between disabled and readonly mode. The value of a disabled widget is not posted as part of a
formwhereas the value of a readonly widget is posted.
The argument, which defines whether the DatePicker should be readonly or editable.
<input id="datepicker" />
<script>
$("#datepicker").kendoDatePicker();
var datepicker = $("#datepicker").data("kendoDatePicker");
datepicker.readonly();
</script>
<input id="datepicker" />
<script>
$("#datepicker").kendoDatePicker();
var datepicker = $("#datepicker").data("kendoDatePicker");
datepicker.readonly(false);
</script>
Gets/Sets the max value of the DatePicker.
The max date to set.
Date The max value of the DatePicker.
<input id="datepicker" />
<script>
$("#datepicker").kendoDatePicker();
var datepicker = $("#datepicker").data("kendoDatePicker");
var max = datepicker.max();
console.log(max);
</script>
<input id="datepicker" />
<script>
$("#datepicker").kendoDatePicker();
var datepicker = $("#datepicker").data("kendoDatePicker");
datepicker.max(new Date(2100, 0, 1));
</script>
Gets/Sets the min value of the DatePicker.
The min date to set.
Date The min value of the DatePicker.
<input id="datepicker" />
<script>
$("#datepicker").kendoDatePicker();
var datepicker = $("#datepicker").data("kendoDatePicker");
var min = datepicker.min();
console.log(min);
</script>
<input id="datepicker" />
<script>
$("#datepicker").kendoDatePicker();
var datepicker = $("#datepicker").data("kendoDatePicker");
datepicker.min(new Date(2000, 0, 1));
</script>
Opens the calendar.
<input id="datepicker" />
<button id="open">Open</button>
<script>
$("#datepicker").kendoDatePicker();
var datepicker = $("#datepicker").data("kendoDatePicker");
$("#open").click(function() {
datepicker.open();
});
</script>
Changes the initial DatePicker configuration.
The new configuration options.
<input id="datepicker" />
<script>
$("#datepicker").kendoDatePicker({
min: new Date(2001, 0, 1),
max: new Date()
});
var datepicker = $("#datepicker").data("kendoDatePicker");
datepicker.setOptions({
min: new Date(2010, 5, 6)
});
</script>
Gets/Sets the value of the DatePicker.
The value to set.
Date The value of the DatePicker.
<input id="datepicker" />
<script>
$("#datepicker").kendoDatePicker({
value: new Date(2013, 10, 10)
});
var datepicker = $("#datepicker").data("kendoDatePicker");
var value = datepicker.value();
console.log(value);
</script>
<input id="datepicker" />
<script>
$("#datepicker").kendoDatePicker({
value: new Date(2013, 10, 10)
});
var datepicker = $("#datepicker").data("kendoDatePicker");
datepicker.value(new Date());
</script>
Fires when the selected date is changed
The widget instance which fired the event.
<input id="datepicker" />
<script>
$("#datepicker").kendoDatePicker({
change: function() {
var value = this.value();
console.log(value); //value is the selected date in the datepicker
}
});
</script>
<input id="datepicker" />
<script>
$("#datepicker").kendoDatePicker();
var datepicker = $("#datepicker").data("kendoDatePicker");
datepicker.bind("change", function() {
var value = this.value();
console.log(value); //value is the selected date in the datepicker
});
</script>
Fires when the calendar is closed
The widget instance which fired the event.
<input id="datepicker" />
<script>
$("#datepicker").kendoDatePicker({
close: function(e) {
e.preventDefault(); //prevent popup closing
}
});
</script>
<input id="datepicker" />
<script>
$("#datepicker").kendoDatePicker();
var datepicker = $("#datepicker").data("kendoDatePicker");
datepicker.bind("close", function(e) {
e.preventDefault(); //prevent popup closing
});
</script>
Fires when the calendar is opened
The widget instance which fired the event.
<input id="datepicker" />
<script>
$("#datepicker").kendoDatePicker({
open: function(e) {
e.preventDefault(); //prevent popup opening
}
});
</script>
<input id="datepicker" />
<script>
$("#datepicker").kendoDatePicker();
var datepicker = $("#datepicker").data("kendoDatePicker");
datepicker.bind("open", function(e) {
e.preventDefault(); //prevent popup opening
});
</script>