Question

在MVC中，我使用的是HTMLHelper Kendo DatePicker，这些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 Datepicker绑定，以验证结束日期不小于开始日期。

Answer 1

如果一个Kendo日期选择器在DOM中有id sDate，你可以用jQuery获取它的值：

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

您还可以绑定要在字段更改时调用的JS函数，它从控件到控件稍有不同，但对于日期选择器，它是：

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

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

function onChange() {
  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中动态生成Kendo DatePicker，OnChange事件验证

2 个答案: