Kendo UI Datepicker disable typing

Question

I want users to be able to change a Kendo UI Datepicker value only through its button and selecting the date from the pop-up. How can I prevent users from typing in the Datepicker textbox? Can I disable the textbox without disabling the whole control?

score 57 · Accepted Answer · answered Sep 16 '13 at 19:24

57

On your input element add this attribute and value...

onkeydown="return false;"

This will disable typed input and still allow using the calendar control input.

answered Sep 16 '13 at 19:24

Justin Russo

2,214
1
22
26

1

only solution that I found to be working well with angularjs integration... Thanks – simpleusr Sep 28 '16 at 13:23
On web its working fine but in mobile it's not working. I am using phonegap build for my app. – Talk is Cheap Show me Code Nov 13 '18 at 08:09
Working fine! but copy-paste is still available. – sebu Apr 24 '19 at 20:06
This was an answer from 2013. It is possible that the datepicker has changed, and/or browsers have changed since then. ;) – Justin Russo Apr 25 '19 at 01:34
sebu, are you developing old school JS, or are you using ReactJS or Angular framework? – Justin Russo Apr 25 '19 at 01:35
The problem with this is that you can still right-click and paste a value. – Jnr Jun 06 '19 at 10:37

score 18 · Answer 2 · answered Sep 10 '14 at 08:57

18

Use the control as below-

@(Html.Kendo().DatePicker()
.Name("FromDate")
.HtmlAttributes(onkeydown="javascript:return false;" })
      )

It will disable keyboard typing. Same way other conditions also can be handled.

answered Sep 10 '14 at 08:57

Sharad Tripathi

181
1
3

11

This works well although the syntax should be: .HtmlAttributes(new { onkeydown = "javascript:return false;" }) – iandayman Dec 18 '14 at 10:54

score 6 · Answer 3 · answered Jul 03 '13 at 07:06

6

Find your input element, and disable it

$('#datepicker').attr('disabled','disabled');

( tried it on the kendo demo website http://demos.kendoui.com/web/datepicker/index.html )

answered Jul 03 '13 at 07:06

AntouanK

4,880
1
21
26

1

this does work but when the input has a data-bind="disabled: XXX" then it won't work for some reason – xinthose Apr 27 '15 at 19:12
I had the same issue, and was able to make it work when using a `data-bind="disabled: XXX"` by binding to the viewmodel's change event, and in that bound function setting the attribute to disabled whenever the viewmodel's data changes. – Chris Kline Jul 15 '15 at 08:31
1

this disabled the entire date picker, you can't pick, add, write, etc, any date by any ways, not a solution at all – Jack1987 Jun 04 '19 at 22:01

score 6 · Answer 4 · answered Dec 09 '13 at 10:45

6

you can do it by two ways

  //disable kendo ui  datapicker click event
    $(".k-datepicker input").bind('click dblclick',function () {
         return false;
    });

    //make it readonly
   $(".k-datepicker input").prop("readonly", true);

answered Dec 09 '13 at 10:45

A_m0

974
2
17
45

I think the first option won't prevent the user from reaching the control by pressing TAB. – Andrew Mar 21 '17 at 20:31

score 4 · Answer 5 · answered Jul 03 '13 at 07:17

4

If you want prevent user to typing date in date picker and only select date from pop-up try this code

$(".k-datepicker").find('span').find('input').attr("readonly", "readonly");

answered Jul 03 '13 at 07:17

Jaimin

7,964
2
25
32

score 2 · Answer 6 · answered Jul 13 '13 at 04:15

Of course, the date and time picker widget should have the option to force input only with UI and not by keyboard... Otherwise it's a recipe for a real DateTime "formating" nightmare ! I am quite surprised that the framework doesn't provide anything for this obvious use case.

I had the same need and got it to work using the following logic:

$("#date").kendoDatePicker({
    format: "dd MMMM yyyy"
});
$("#date").attr("readonly","readonly");

That way the user cannot enter a value by keyboard and can only input a well formated date using the dropdown date selection window.

score 0 · Answer 7 · answered Jun 24 '16 at 08:04

Indeed, the widget does not restrict user while typing in the input. The reason for this behavior is explained here: Why widget does not restrict typing

Along with all other solutions shared in this thread, the one can create a custom Masked DatePicker, which will restrict the user to a specific date format. Check this how-to demo for more details:

Create Date Masking

**Note that this is not supported by Kendo UI as a built-in feature, hence you will need to use it on your own risk. The good news is that it works pretty good without known side effects.

score 0 · Answer 8 · edited Mar 15 '19 at 11:40

0

.HtmlAttributes(new { onkeydown="return false" })

edited Mar 15 '19 at 11:40

Zoe

27,060
21
118
148

answered Mar 15 '19 at 11:38

user11208372

11

.HtmlAttributes(new { @onkeydown="return false;" }) is working for my in net core. Not a nice solution though – TDP Nov 24 '21 at 15:35

score 0 · Answer 9 · answered Jun 06 '19 at 10:55

Justin's answer works, but it doesn't prevent a right mouse-click from pasting an incorrect value. You could use the oncontextmenu to prevent a right mouse-click

oncontextmenu="return false;"

This would also prevent the number in the calendar from being copied though.

score 0 · Answer 10 · answered Jul 20 '20 at 01:23

0

for tagHelpers just use following

output.Attributes.Add("onkeydown", "javascript:return false;");

answered Jul 20 '20 at 01:23

Kumar Shishir

155
1
13

score 0 · Answer 11 · answered Oct 08 '21 at 06:08

0

I have solved it on HTML level using onkeydown="return false;"

<input id="datePickerPastId" onkeydown="return false;" title="datepicker" style="width: 13%" class="mr-3" disabled />

The GlobalEventHandlers.onkeydown is supported by all browsers.

answered Oct 08 '21 at 06:08

JasminB

21
3

score 0 · Answer 12 · answered May 26 '23 at 17:15

0

Above were close, but if you need to disable paste as well, you'll need to do:

onkeydown="return false;" onpaste="return false;"

answered May 26 '23 at 17:15

crunch

355
4
16

Kendo UI Datepicker disable typing

12 Answers12

Linked