CODEWITHSUNDEEP
jquerymodel-view-controllerkendo-uidatepicker
Naeem Ullah
Naeem Ullah

Reputation: 3

In MVC dynamically generated Kendo DatePicker, OnChange event validation

In MVC, I am using HTMLHelper Kendo DatePicker, these datepicker controls are dynamically generated when a user clicks on add new row. I want to validate that end date is not before the start date. Following is my code for one row.

<tr id="@strRowID">
    <td>
        <input type="hidden"  name="ProjectActivities.Index" value="@strID" />
        <input type="hidden"  name="ProjectActivities[@(strid)].DetailEntity.ID" value="@Model.DetailEntity.ID"/>
        <input type="hidden"  name="ProjectActivities[@(strid)].DetailEntity.ProjectActID" value="@Model.DetailEntity.ProjectActID"/>
        <input type="hidden"  name="ProjectActivities[@(strid)].DetailEntity.CreatedOn" value="@Model.DetailEntity.CreatedOn"/>
        <input type="hidden"  name="ProjectActivities[@(strid)].DetailEntity.CreatedBy" value="@Model.DetailEntity.CreatedBy"/>
        <input type="hidden"  name="ProjectActivities[@(strid)].DetailEntity.VersionEncoded" value="@Model.DetailEntity.VersionEncoded"/>
        <input type="hidden" id="@strStateID"  name="Activities[@(strid)].DetailEntity.EntityState" value="@Model.DetailEntity.EntityState"/>
    </td>
    <td>@Html.TextBox("ProjectActivities[" & strID & "].DetailEntity.ActivityDescription", Model.DetailEntity.ActivityDescription, New With {.class = "inputAreaFull k-textbox"})</td>
    <td>@Html.Kendo.DatePicker.Name("ProjectActivities[" & strID & "].DetailEntity.ActStartDate").Value(Model.DetailEntity.ActStartDate).Format("dd-MMM-yyyy").Events(Function(X) X.Change(<text>Loveyou();</text>))</td>
    <td>@Html.Kendo.DatePicker.Name("ProjectActivities[" & strID & "].DetailEntity.ActEndDate").Value(Model.DetailEntity.ActEndDate).Format("dd-MMM-yyyy")</td>

    <td>
      <img src="@Url.Content("/Content/delete_icon.png")" onclick="removeProjectActivityRow('@strRowID','@strStateID')" style ="cursor:pointer" title="Delete Detail"/>
    </td>
 </tr>

I need help to bind the Jquery function with each Kendo Datepicker to validate that end date is not less then start date.

Upvotes: 0

Views: 2135

Answers (2)

Richard
Richard

Reputation: 108975

If a Kendo date picker has id sDate in the DOM, you can get its value with jQuery:

var startDate = $('sDate').data('kendoDatePicker').value();

You can also bind a JS function to be called when a field changes, it varies a little from control to control, but for date pickers it is:

$('sDate').data('kendoDatePicker').bind('change', sDateChanged);

Thus you can perform logic like:

function sDateChanged() {
  var start = startDate.value() || minDate;
  var end = endDate.value() || maxDate;

  if ($(this.element).attr('id') === startDateInputId) {
    if (end < start) {
      end.value(start);
    }
    endDate.min(start);
  } else {
    if (start > end) {
      start.value(end);
    }
    startDate.max(end);
  }
}

where endDate is the equivalent of startDate for the end date control. minDate and maxDat are JS Date objects limiting the total range of dates.

Upvotes: 1

Naeem Ullah
Naeem Ullah

Reputation: 3

Thanks for submitting the answers, I have sorted out first by binding and then putting the logic to check the values. Following is my code for binding...

$('body').on('change', 'input.ActEnd', function () {
        var str = this.id;
        var res = str.replace("ActEndDate", "ActStartDate");
        var start = document.getElementById(res);            
    });

In HTML, I have put in following

<td>@Html.Kendo.DatePicker.Name("ProjectActivities[" & strID & "].DetailEntity.ActStartDate").Value(Model.DetailEntity.ActStartDate).Format("dd-MMM-yyyy").HtmlAttributes(New With {.class = "ActStart"})</td>
    <td>@Html.Kendo.DatePicker.Name("ProjectActivities[" & strID & "].DetailEntity.ActEndDate").Value(Model.DetailEntity.ActEndDate).Format("dd-MMM-yyyy").HtmlAttributes(New With {.class = "ActEnd"})</td>

So this worked for me.

Upvotes: 0

Related Questions