Making Kendo Datepicker readonly but also selectable

Question

I´ve been struggling to make my Kendo Datepicker without user-text-input and the only solution I´ve come up with was making the tag "readonly". However I want to be able to select the date from the selector with the mouse without being able to input text directly to the picker, therefore making the datepicker readonly but selectable.

Any ideas how?

                <div>
                    @(Html.Kendo().DatePicker()
                          .Start(CalendarView.Year)
                          .Name("DatePicker")
                          .Value(DateTime.Now.AddDays(-365))
                          .Max(DateTime.Now)
                          .HtmlAttributes(new { style = "width: 125px;"  })
                          .Events(e => e.Change("onDateChange")))
                </div>

gardarvalur · Accepted Answer · 2013-08-20T14:54:48.440

8

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;
    }
});

edited Aug 20 '13 at 14:54

answered Aug 19 '13 at 21:06

gardarvalur

1,565
9
39
65

1

Interesting that Kendo didn't cover this. One detail, this solution might be little confusing for user,eg. when you select a field you should be allowed to type into it. What about opening the datapicker instead of swallowing the keystroke when user tries to type in. – Vojtiik Aug 20 '13 at 09:12
Thank you for your input @Bobby_D_. I also found it quite weird that they didn´t cover this, at least I went through all of their documentation and there was nothing about suppressing keystrokes. I think you may be on to something when suggesting to not suppressing the keystrokes but open the datepicker instead. I´ve updated my answer to reflect just that. Thank you :) – gardarvalur Aug 20 '13 at 14:51
But how do you prevent copy and paste via browser right click menu? – Myles J Sep 12 '14 at 09:15
Check this @MylesJ : https://stackoverflow.com/questions/5618109/how-to-prevent-right-click-option-using-jquery – gardarvalur Sep 29 '14 at 19:42

Anuj · Answer 2 · 2019-08-27T13:29:14.213

2

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.

edited Aug 27 '19 at 13:29

answered Aug 26 '19 at 11:43

Anuj

51
3

Consider adding an explanation along with your code to make it clearer. – Viktor Aug 26 '19 at 12:02
This basically does the same thing, just less noise :) – gardarvalur Aug 27 '19 at 19:21

score 0 · Answer 3 · answered Sep 02 '20 at 10:53

If you want to just select data from opening calendar which kendoDatePicker show you but user not allow to enter date

<link href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.default.min.css" rel="stylesheet" />

<input type="text" onkeydown="return false" placeholder="Enter Date"  class="DatePicherKendo" />


<script src="~/bower_components/DataPicker-Kendo/JalaliDate.js"></script>
<script src="~/bower_components/DataPicker-Kendo/kendo.web.js"></script>

   $(".DatePicherKendo").kendoDatePicker();

score -2 · Answer 4 · edited Jan 16 '15 at 20:52

-2

Add a maxlength attribute of 0 in HtmlAttributes.

edited Jan 16 '15 at 20:52

Michael Irigoyen

22,513
17
89
131

answered Jan 16 '15 at 20:33

tjaddison

1
1

Making Kendo Datepicker readonly but also selectable

4 Answers4