To don't allow DatePicker keyboard input

[Christian]

Hi,
I'm working with datepickers and I tried the following a while ago:

$("#begin_date").attr('disabled','disabled');

I tried this to disable the text input of a date. But I realized later that it also makes the attribute unavailable for the web server to use in my application. The server wasn't receiving the dates I was picking so I stopped using it.

Is there anyway to disable that text input besides this method?

[John DeVight]

Hi Christian,

What if you did the following instead?

$("#begin_date").attr("readonly","readonly");

Regards,

John DeVight

[Vicente]

What has worked for me is this instead.

HTML
<input id="f1" width="150px" />

JS
$("#f1").kendoDatePicker().data("kendoDatePicker");
$("#f1").attr("disabled","disabled");

Hope this helps someone. Cheers.

[Jamshed]

but the issue is kendo validation will not work with  attribute 

[Viktor Tachev]

Hello,

In order to prevent keyboard input for the DatePicker component it is recommended to make it read only. Please check out the article below that describes the approach:

• https://docs.telerik.com/kendo-ui/controls/editors/datepicker/how-to/readonly-input

Regards,
Viktor Tachev
Progress Telerik

[Heythem]

Hi , 
when you add a read only attribute to the input , any custom validation applied on that field won't be triggered.
Is there a way to forbid any input from the keyboard into the field ? 

[Chris]

Hello,

The link provided https://docs.telerik.com/kendo-ui/controls/editors/datepicker/how-to/readonly-input links to an error page.

[Neli]

Hi Chris,

Please find below the correct link to the article:

- https://docs.telerik.com/kendo-ui/knowledge-base/readonly-input

Regards,

Neli

[Viktor Tachev]

Hello Heythem,

In order to prevent the users from interacting with a DatePicker widget without making it read-only you can use combination of CSS and JavaScript. For preventing mouse interactions with the widget use the CSS below:

#datepicker,
#datepicker + .k-select
{
    pointer-events: none;
}

And to prevent the users from typing in the DatePicker input use this JavaScript:

$("#datepicker").on("keydown", function(e) {
    e.preventDefault();
});

Note that you should replace "#datepicker" with the ID of the widget used on your end.

I also prepared an example illustrating the functionality:

• https://dojo.telerik.com/UBAyuLAk

Regards,
Viktor Tachev
Progress Telerik