How to disable keyboard input for datepicker - Kendo UI Mobile
Monday, January 06, 2014
Create inputs with start and end date in html page. Example index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Kendo UI Mobile DatePicker</title>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0" />
/* Add Kendo CSS and your custom CSS */
<link href="css/kendo.mobile.all.min.css" rel="stylesheet" />
<link href="css/kendo.common.min.css" rel="stylesheet" />
<link href="css/kendo.default.min.css" rel="stylesheet" />
<link href="css/custom.css" rel="stylesheet" />
</head>
<body>
<div id="add_screen">
<ul class="pdetails">
<li class="simple-lbl">Start </li>
<li class="claim-value">
<input id="startdatepicker" value="" name="startdate" style="width:100%;"/>
</li>
</ul>
<ul class="pdetails">
<li class="simple-lbl">End</li>
<li class="claim-value">
<input id="enddatepicker" value="" name="enddate" style="width:100%;"/>
</li>
</ul>
</div>
<script>
var app = new kendo.mobile.Application();
$("#startdatepicker").kendoDatePicker({format: "yyyy-MM-dd"});
$("#enddatepicker").kendoDatePicker({format: "yyyy-MM-dd"});
$("#startdatepicker").attr("disabled","disabled"); // This will disable the keyboard input and date will be selected from the calendar popup only.
$("#enddatepicker").attr("disabled","disabled");
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Kendo UI Mobile DatePicker</title>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0" />
/* Add Kendo CSS and your custom CSS */
<link href="css/kendo.mobile.all.min.css" rel="stylesheet" />
<link href="css/kendo.common.min.css" rel="stylesheet" />
<link href="css/kendo.default.min.css" rel="stylesheet" />
<link href="css/custom.css" rel="stylesheet" />
</head>
<body>
<div id="add_screen">
<ul class="pdetails">
<li class="simple-lbl">Start </li>
<li class="claim-value">
<input id="startdatepicker" value="" name="startdate" style="width:100%;"/>
</li>
</ul>
<ul class="pdetails">
<li class="simple-lbl">End</li>
<li class="claim-value">
<input id="enddatepicker" value="" name="enddate" style="width:100%;"/>
</li>
</ul>
</div>
<script>
var app = new kendo.mobile.Application();
$("#startdatepicker").kendoDatePicker({format: "yyyy-MM-dd"});
$("#enddatepicker").kendoDatePicker({format: "yyyy-MM-dd"});
$("#startdatepicker").attr("disabled","disabled"); // This will disable the keyboard input and date will be selected from the calendar popup only.
$("#enddatepicker").attr("disabled","disabled");
</script>
</body>
</html>
1 comments
Hello! I am reading this post after 2 years and I'm trying to use kendo datepicker in a web app, where the text input should be disabled for manual entry. But using 'disabled' stops the query of search date from reaching server. Could you please suggest a solution to this scenario?
ReplyDelete