CODEWITHSUNDEEP
javascripthtmlkendo-ui
Pejman
Pejman

Reputation: 3994

Kendo UI Datepicker disable typing

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?

Upvotes: 37

Views: 46500

Answers (12)

Sharad Tripathi
Sharad Tripathi

Reputation: 191

Use the control as below-

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

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

Upvotes: 19

crunch
crunch

Reputation: 375

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

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

Upvotes: 0

JasminB
JasminB

Reputation: 31

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.

enter image description here

Upvotes: 0

Kumar Shishir
Kumar Shishir

Reputation: 235

for tagHelpers just use following

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

Upvotes: 0

Jnr
Jnr

Reputation: 1684

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.

Upvotes: 0

user11208372
user11208372

Reputation: 11

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

Upvotes: 0

George K
George K

Reputation: 1763

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.

Upvotes: 0

A_0
A_0

Reputation: 1004

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

Upvotes: 6

Justin Russo
Justin Russo

Reputation: 2214

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.

Upvotes: 57

Tuthmosis
Tuthmosis

Reputation: 1161

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.

Upvotes: 2

Jaimin
Jaimin

Reputation: 8020

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

Upvotes: 4

AntouanK
AntouanK

Reputation: 4988

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 )

Upvotes: 6

Related Questions