Creating a DatePicker from <input />
Source:
<input id="datepicker" value="10/10/2011"/>
<script>
$("#datepicker").kendoDatePicker();
</script>
Output:
- Description
- View Code
- Configuration (6)
- Methods (6)
- Events (3)
The DatePicker widget allows to the end user to select a date from a graphical calendar. It supports custom templates for "month" view, configurable options for min and max date, start view and the depth of the navigation.
Getting Started
Creating a DatePicker from existing INPUT element
<!-- HTML -->
<input id="datepicker"/>DatePicker initialization
$(document).ready(function(){
$("#datepicker").kendoDatePicker();
});When a DatePicker is initialized, it will automatically be displayed near the location of the used HTML element.
Configuring DatePicker behaviors
DatePicker provides configuration options that can be easily set during initialization. Among the properties that can be controlled:
- Selected date
- Minimum/Maximum date
- Define format
- Start view
- Define the navigation depth (last view to which end user can navigate)
Create DatePicker with selected date and defined min and max date
$("#datepicker").kendoDatePicker({
value: new Date(),
min: new Date(1950, 0, 1),
max: new Date(2049, 11, 31)
});DatePicker will set the value only if the entered date is valid and if it is in the defined range
Define start view and navigation depth
The first rendered view can be defined with "startView" option. Navigation depth can be controlled with "depth" option. Predefined views are:
- "month" - shows the days from the month
- "year" - shows the months of the year
- "decade" - shows the years from the decade
- "century" - shows the decades from the century
Create Month picker
$("#calendar").kendoDatePicker({
startView: "year",
depth: "year"
});No code
-
close()Closes the calendar.Example
datepicker.close(); -
enable(value)Enable/Disable datepicker widget.Example
var datepicker = $("#datepicker").data("kendoDatePicker"); // disables the datepicker datepicker.enable(false); // enables the datepicker datepicker.enable(true);Parameters
-
value: Boolean - The value, which defines whether to enable/disable datepicker.
-
-
max(value) : DateGets/Sets the max value of the datepicker.Example
var datepicker = $("#datepicker").data("kendoDatePicker"); // get the max value of the datepicker. var max = datepicker.max(); // set the max value of the datepicker. datepicker.max(new Date(1900, 0, 1));Parameters
-
value: Date|String - The max date to set.
- Returns
- Date The max value of the datepicker.
-
-
min(value) : DateGets/Sets the min value of the datepicker.Example
var datepicker = $("#datepicker").data("kendoDatePicker"); // get the min value of the datepicker. var min = datepicker.min(); // set the min value of the datepicker. datepicker.min(new Date(1900, 0, 1));Parameters
-
value: Date|String - The min date to set.
- Returns
- Date The min value of the datepicker.
-
-
open()Opens the calendar.Example
datepicker.open(); -
value(value) : DateGets/Sets the value of the datepicker.Example
var datepicker = $("#datepicker").data("kendoDatePicker"); // get the value of the datepicker. var value = datepicker.value(); // set the value of the datepicker. datepicker.value("10/10/2000"); //parse "10/10/2000" date and selects it in the calendar.Parameters
-
value: Date|String - The value to set.
- Returns
- Date The value of the datepicker.
-