New to Kendo UI for jQuery? Start a free 30-day trial
Integrate the DatePicker with the DateJS Library
Updated over 6 months ago
Environment
| Product | Progress® Kendo UI® DatePicker for jQuery |
| Operating System | Windows 10 64bit |
| Visual Studio Version | Visual Studio 2017 |
| Preferred Language | JavaScript |
Description
How can I integrate the Kendo UI for jQuery DatePicker with DateJS?
Solution
The following example demonstrates how to integrate the DatePicker with DateJS and use its syntactic sugar.
<div id="email-settings">
<div class="display-picker">
<input id="datepicker" placeholder="type 'next friday'" style="width:150px;" />
</div>
<div class="archive-picker">
<input id="monthpicker" value="November 2011" style="width:150px" />
</div>
<p>Integration with the <a target="_blank" href="http://www.datejs.com/">DateJS</a> library</p>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datejs/1.0/date.min.js"></script>
<script>
$(document).ready(function() {
// create the DatePicker from an input HTML element
$("#datepicker").kendoDatePicker();
$("#monthpicker").kendoDatePicker({
// defines the start view
start: "year",
// defines when the calendar will return the date
depth: "year",
// display the month and year in the input
format: "MMMM yyyy"
});
// parse the input value on blur by using DateJS
$("[data-role=datepicker]").on("blur", function() {
var element = $(this);
var widget = element.data("kendoDatePicker");
if (element.val()) {
widget.value(Date.parse(element.val()));
}
});
});
</script>