Make DatePicker Input Elements Read-Only
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 make an input element of the Kendo UI for jQuery DatePicker read-only and prevent the user from typing?
Solution
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%" />
</p>
</div>
<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"
});
// DISABLE inputs
$("#datepicker").attr("readonly", true);
$("#monthpicker").attr("readonly", true);
});
</script>
</div>