We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

how to disable user key in/type in in daterangepicker


appreciate if you can help me to disable user key/type in for daterangepicker. I just want user to only select the date range from given date selection. 
This is because, I only want user to just follow this format date. My actual daterangepicker has button search after user select the date range. I don't want system to check on client side or server side validation for date format input by user themselves by key/type in. Hope you can understand my requirement.

my code :

<div class="col-md-3" style="font-weight:bold;">
   <ejs-daterangepicker id="daterangepickerFor" style="font-weight:bold;" value="@ViewData["daterange"]" placeholder="@ViewData["daterange"]" name="daterange" format="dd/MM/yyyy " ejs-for="@Model.Search_DateValue"></ejs-daterangepicker>
<div class="col-md-1">
  <ejs-button id="normalbtn" content="Search" type="submit" isPrimary="true" cssClass="e-outline"></ejs-button>



1 Reply

DL Deepa Loganathan Syncfusion Team December 31, 2018 01:59 AM

Hi Afiq,  
Thanks for contacting Syncfusion support.  
We understood your requirement to restrict the user from entering the values in Daterangepicker with input element and allow inputs only with popup selection.  This requirement can be achieved by setting the allowEdit API to false as given below.  

<ejs-daterangepicker id="daterangepickerFor" style="font-weight:bold;" placeholder="@ViewData["daterange"]" name="daterange" format="dd/MM/yyyy" allowEdit="false"></ejs-daterangepicker> 

We suggest you checking out our API help document to explore more about the options available in Daterangepicker.  

Deepa L. 

Live Chat Icon For mobile
Up arrow icon