javascript - 如何在 Kendo UI 网格中比较一行两列中的日期？

Question

我有一个 kendo UI 网格，其中有 2 列 StartDate 和 EndDate。在进行内联编辑时，我想比较 StartDate 不应大于 EndDate。我在下面的 StartDate 字段的自定义验证中执行此操作。但是 var StartDate 被分配了 null 值。

model: {
                id: "BusinessAreaDivisionMappingId",
                fields: {
                    BusinessAreaDivisionMappingId: { type: "number", editable: false, nullable: false },

                    StartDate: {
                        from: "BusinessAreaDivisionMappingEntity.StartDate", type: "date",
                        validation:
                            {
                                required: true,
                                dateComparisonValidation: function (input) {
                                    debugger;
                                    if (input && (input.attr("name") == "StartDate"|| input.attr("name") == "EndDate")) {
                                        input.attr("data-dateComparisonValidation-msg", "Start Date cannot be more than End Date");
                                        var startDate = input.closest(".k-edit-form-container").find("[name='StartDate']").data("kendoDatePicker");
                                        var endDate = input.closest(".k-edit-form-container").find("[name='EndDate']").data("kendoDatePicker");
                                        if (Date(startDate) > Date(endDate)) {
                                            return false;
                                        }
                                    }
                                    return true;
                                }
                            }
                    },
                    EndDate: { from: "BusinessAreaDivisionMappingEntity.EndDate", type: "date" }
                }
            }

Answer 1

更新

这里是完整的工作示例:

http://dojo.telerik.com/IqeNA

<小时/>

我认为，对于用户体验来说，不能够选择无效值相比，看到这些值无效并重新选择它们确实更好。

如果您同意为包含日期的列添加自定义编辑器:

var dateEditor = function (container, options) {
var input = $('<input />');

input.appendTo(container)
  .kendoDatePicker({
    format: "dd.MM.yyyy"
  });
var datePicker = input.data("kendoDatePicker");
  switch (options.field) {
    case "startDate":
      if (options.model.finishDate) {
        datePicker.max(options.model.finishDate);
      }
      break;

    case "finishDate":
      if (options.model.startDate) {
        datePicker.min(options.model.startDate);
      }
      break;
  }
};

在此处了解自定义编辑器

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.editor

如果您在为内联编辑器添加编辑器时遇到问题，请阅读该文章

Kendo Grid using inline editing and custom editor dropdown control