Making Kendo Datepicker readonly but also selectable
After a while I found a very simple solution using javascript. I simply declared a script that prevents any user input without disabling or making the input readonly. Something like this:
$("#inputId").keypress(function (evt) {
var keycode = evt.charCode || evt.keyCode;
if (keycode == 9) { //allow Tab through
return true;
} else {
return false;
}
});
It was easier than I thought :)
########### EDITED ####################
As suggested in a comment, it is probably not good practice to suppress all the keystrokes so I will paste almost the same code but suggesting that I open the datePicker instead (but still kind of suppressing the user text input as well).
$("#inputId").keypress(function (evt) {
var keycode = evt.charCode || evt.keyCode;
if (keycode == 9) { //allow Tab through
return true;
} else {
// Allow the datepicker to open instead
var datePicker = $("#inputId").data("kendoDatePicker");
datePicker.open();
return false;
}
});
You can do something like this:
@(Html.Kendo().DatePicker().Name("FollowUpDate").HtmlAttributes(new{onkeydown="javascript:return false;" }))
when someone clicks the datepicker it returns false hence does not allow to type anything while it still remains selectable.