Kendo DatePicker

Aniket Narvankar

4y2.1k.NET

I am using a Kendo DatePicker

@Html.Kendo().DatePicker().Name("RunDateDisplay").HtmlAttributes(new { type = "text", @Style = "width: 100px;", tabIndex = "13" }).Format("MM/dd/yyyy")

I want to make it readonly on page loads and when user checkbox make it readonly false.

This is what i have done. On document.ready wrote this

$("#RunDateDisplay").attr("readonly","readonly"); to make this readonly and on checkbox click did this

$("#RunDateDisplay").removeAttr('readonly');

but this is not working. calendar is not loading,please let me know how this could be done.

7 Replies

Know the answer? Post it — somebody with the same question will find it here.

Aniket Narvankar4y ago
hi sachin,got one solution from this link
https://docs.telerik.com/kendo-ui/api/javascript/ui/datepicker/methods/readonly

but on document.ready event when i wrote this

var datepicker = $("#RunDateDisplay").data("kendoDatePicker");
datepicker.readonly();
this give error when wrote on document.ready error was can not read property readonly of undefined. this is did not understood.

so did it in this way

@Html.Kendo().DatePicker().Name("RunDateDisplay").HtmlAttributes(new { type = "text", @Style = "width: 100px;", tabIndex = "13",@readonly="readonly" }).Format("MM/dd/yyyy")

and then on checkbox checked event wrote this

var datepicker = $("#RunDateDisplay").data("kendoDatePicker");
datepicker.readonly(false);

and again when i unchecked checkbox wrote this to make it readonly

var datepicker = $("#RunDateDisplay").data("kendoDatePicker");
datepicker.readonly();

this is working as required,but do not know why when written on document.ready it give error.
+1
Aniket Narvankar4y ago
this tried,enabling disabling was converting into textbox

+1
Sachin Singh4y ago
This should work i think
on ready event
$('#RunDateDisplay').data('kendoDatePicker').enable(false);
on checkbox checked
$('#RunDateDisplay').data('kendoDatePicker').enable(true);
+1
Aniket Narvankar4y ago
this is working,but it opens the calendar on checkbox click,i want to open it when user clicks on calendar image.
+1
Sachin Singh4y ago
Ok after setting readonly to false do
this
var datePicker = $("#RunDateDisplay").data("kendoDatePicker");
datePicker.open();
+1
Aniket Narvankar4y ago
tried using true false also
+1
Sachin Singh4y ago
have you tried using true and false?
$("#RunDateDisplay").attr("readonly",true);

//on checkbox checked
$("#RunDateDisplay").attr("readonly",false);
+1