New to Kendo UI for jQuery? Download free 30-day trial

Integrate the DatePicker with the DateJS Library


Product Progress® Kendo UI® DatePicker for jQuery
Operating System Windows 10 64bit
Visual Studio Version Visual Studio 2017
Preferred Language JavaScript


How can I integrate the Kendo UI for jQuery DatePicker with DateJS?


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 class="archive-picker">
            <input id="monthpicker" value="November 2011" style="width:150px" />
        <p>Integration with the <a target="_blank" href="">DateJS</a> library</p>
    <script src=""></script>
        $(document).ready(function() {
            // create the DatePicker from an input HTML element

                // 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 ="kendoDatePicker");

                if (element.val()) {

See Also

In this article