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

Make DatePicker Input Elements Read-Only


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


How can I make an input element of the Kendo UI for jQuery DatePicker read-only and prevent the user from typing?


The following example demonstrates how to achieve the desired scenario.

    <div id="example">
        <div class="demo-section k-content">

            <h4>Show e-mails from:</h4>
            <input id="datepicker" value="10/10/2011" style="width: 100%" />

            <h4 style="margin-top: 2em;">Add to archive mail from:</h4>
            <input id="monthpicker" value="November 2011" style="width: 100%" />
        $(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"

            // DISABLE inputs
            $("#datepicker").attr("readonly", true);
            $("#monthpicker").attr("readonly", true);

See Also

In this article