MVC中动态生成KendoDatePicker、OnChange事件验证

Question

在 MVC 中，我使用 HTMLHelper Kendo DatePicker，这些日期选择器控件是在用户单击添加新行时动态生成的。我想验证结束日期不早于开始日期。以下是我的一行代码。

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

我需要帮助将 Jquery 函数与每个 Kendo 日期选择器绑定，以验证结束日期不早于开始日期。

Answer 1

如果 Kendo 日期选择器在 DOM 中有 ID sDate，您可以通过 jQuery:

获取它的值

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

您还可以绑定一个 JS 函数，以便在字段更改时调用，它因控件而异，但对于日期选择器，它是：

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

因此您可以执行如下逻辑：

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

其中 endDate 相当于结束日期控件的 startDate。 minDate 和 maxDat 是限制日期总范围的 JS Date 对象。

Answer 2

感谢提交答案，我已经先通过绑定整理，然后放入逻辑来检查值。以下是我的绑定代码...

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

在HTML中，我输入了以下内容

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

所以这对我有用。

MVC中动态生成KendoDatePicker、OnChange事件验证

In MVC dynamically generated Kendo DatePicker, OnChange event validation

model-view-controller

jquery

datepicker

kendo-ui