To don't allow DatePicker keyboard input

1 Answer 1733 Views
Date/Time Pickers
Christian
Top achievements
Rank 1
Christian asked on 01 Aug 2012, 09:19 PM
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
Top achievements
Rank 1
commented on 07 Aug 2012, 02:46 PM

Hi Christian,

What if you did the following instead?

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

Regards,

John DeVight
Vicente
Top achievements
Rank 1
commented on 31 Aug 2012, 06:45 AM

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
Top achievements
Rank 1
commented on 12 Dec 2017, 10:04 AM

but the issue is kendo validation will not work with  attribute 
Viktor Tachev
Telerik team
commented on 14 Dec 2017, 03:41 PM

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:



Regards,
Viktor Tachev
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Heythem
Top achievements
Rank 1
commented on 25 Mar 2019, 04:23 PM

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 ? 

1 Answer, 1 is accepted

Sort by
0
Viktor Tachev
Telerik team
answered on 28 Mar 2019, 12:05 PM
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:



Regards,
Viktor Tachev
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Date/Time Pickers
Asked by
Christian
Top achievements
Rank 1
Answers by
Viktor Tachev
Telerik team
Share this question
or