Make Input Elements Readonly
The following example demonstrates how to make an input element read-only and prevent the user from typing.
<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 DatePicker from input HTML element
$("#datepicker").kendoDatePicker();
$("#monthpicker").kendoDatePicker({
// defines the start view
start: "year",
// defines when the calendar should return date
depth: "year",
// display month and year in the input
format: "MMMM yyyy"
});
//DISABLE inputs
$("#datepicker").attr("readonly", true);
$("#monthpicker").attr("readonly", true);
});
</script>
</div>
See Also
- DatePicker JavaScript API Reference
- How to Create Date Masking
- How to Globally Modify Default Options
- How to Hide the Default Button
- How to Integrate DatePicker with DateJS Library
- How to Persist Entered Dates
- How to Resize Calendar Based on Input Width
- How to Set the First Weekday
For more runnable examples on the Kendo UI DatePicker, browse its How To documentation folder.