Hi,
I am trying to work with datepickerfor, and coming across a strange behavior. Every time I try to select a month year or date, the page scrolls to the top and I have to come to the bottom of the page again to select the date.
Here is the code snippet for reference (it is a partial view).
Can anyone help, on how to get rid of this behavior.
@model ARGUS.Domain.ViewModel.VM_QualityCheckAdminUI
<div class="card" id="QCDetails">
<div class="card-header sub-detail"><b>Quality Check Answer Details</b></div>
<div class="card-body" id="QCDetailsBody">
<div class="alert alert-danger alert-dismissible d-none msgErr">
<button type="button" class="btn-close" data-bs-dismiss="alert" id="closeBtnError"></button>
<p id="errorMessage">
<ul id="ErrorList">
</ul>
</p>
</div>
<table id="Category Details" width="100%" style="border-color:white">
<Set of other code snippets, other table rows>
<tr>
<td>
<b>Effective Start Date:<span><i class="bi bi-asterisk" style="color:red;font-size:9px"></i></span></b>
</td>
<td>
@*@Html.Kendo().DatePicker().Name("datepicker").Format("dd-mm-yyyy").HtmlAttributes(new { style = "width: 220px", @class = "dateEntryDisabled" });*@
@Html.Kendo().DatePickerFor(m => m.EffectiveStartDate).Format("dd-MMM-yyyy").Value(Model.EffectiveStartDate.ToString("dd-MMM-yyyy")).HtmlAttributes(new { style = "width: 220px", @class = "dateEntryDisabled" })
</td>
</tr>
<tr>
<td>
<b>Effective End Date:</b>
</td>
<td>
@Html.Kendo().DatePickerFor(m => m.EffectiveEndDate).Format("dd-MMM-yyyy").Value(Model.EffectiveEndDate == null ? "" : Model.EffectiveEndDate.Value.ToString("dd-MMM-yyyy")).HtmlAttributes(new { style = "width: 220px", @class="dateEntryDisabled" })
</td>
</tr>
</table>
</div>
</div>
<style>
.txtdisabled {
background-color: #F0F0F0 !important;
color:grey !important;
}
</style>
importing scripts at the end