剑道网格。两个日期选择器的验证答案

【问题标题】：Kendo Grid. Validation of two datepicker剑道网格。两个日期选择器的验证
【发布时间】：2012-12-11 15:51:04
【问题描述】：

我现在有一个问题，我有一个只有两个日期类型的可编辑字段的 Kendo UI Grid，到目前为止一切正常。给我的问题是验证开始日期和结束日期。日期必须始终小于或等于结束日期。我需要验证这两个字段。有想法的人谢谢

dataSource = new kendo.data.DataSource({
    transport: {
        read: {
            url: controller + "/read",
            type: "GET"
        },
        update: {
            url: controller + "/update",
            type: "POST",
            dataType: "json"

            //data: { model: "prueba" }
        },
        destroy: {
            url: controller + "/delete",
            dataType: "json",
            type: "POST"
        }
    },
    batch: true,
    //pageSize: 10,
    schema: {
        model: {
            id: "id_POSPlanningOpe",
            fields: {
                select: { type: "boolean", editable: false },
                id_POSPlanningOpe: { editable: false, nullable: true },
                codPdv: { editable: false },
                nombrePdv: { editable: false },
                regionPdv: { editable: false },
                zonapdv: { editable: false },
                fecha_Inicio: { type: "date", editable: true },
                fecha_Fin: { type: "date", editable: true },
                estado: { editable: false }
            }
        }
    }
});

$("#grid").kendoGrid({
    selectable: "multiple",
    sortable: {
        mode: 'single',
        allowUnsort: false
    },
    dataSource: dataSource,
    height: 500,
    toolbar: [
        { name: "save", text: "Grabar" },
        { name: "cancel", text: "Cancelar" }],
    columns: [
        { title: "<span></span>", width: "20px", template: '<input type="checkbox" name="CheckRow" value="#= id_POSPlanningOpe #"></input>' },
        { field: "id_POSPlanningOpe", title: "<span class='Cabecera'>NRORUTA</span>", width: 80 },
        { field: "codPdv", title: "<span class='Cabecera'>CODIGO PDV</span>", width: 100 },
        { field: "nombrePdv", title: "<span class='Cabecera'>NOMBRE</span>" },
        { field: "regionPdv", title: "<span class='Cabecera'>REGION</span>" },
        { field: "zonapdv", title: "<span class='Cabecera'>ZONA</span>" },
        { field: "fecha_Inicio", title: "<span class='Cabecera'>FECHA INICIO</span>", template: '#= kendo.toString(fecha_Inicio,"dd/MM/yyyy") #', width: 100 },
        { field: "fecha_Fin", title: "<span class='Cabecera'>FECHA FIN</span>", template: '#= kendo.toString(fecha_Fin,"dd/MM/yyyy") #', width: 100 },
        { field: "estado", title: "<span class='Cabecera'>ESTADO</span>", width: 80 },
        { command: ["edit"], title: "&nbsp;", width: "100px" }],
    editable: 'inline'

});

【问题讨论】：

here 中有一个关于日期验证的 KendoUI 演示。你试过了吗？我知道您的案例在grid 中，但应该没有那么不同。

标签： jquery grid datepicker kendo-ui

【解决方案1】：

您可以尝试实现自定义验证规则，如 here 所示。

或者您可以使用 Grid 的 edit 事件来检查值是否处于有效状态，如果不是，您可以阻止 Grid 关闭并通知用户出了什么问题.

【讨论】：

【解决方案2】：

我已经用这个函数做到了：

(function ($, kendo) {
    $.extend(true, kendo.ui.validator, {
        rules: { // custom rules
            startdatetimevalidation: function (input, params) {
                if ($(input).val() && $(input).attr('id') == "StartDateTime") {
                    if ($('#EndDateTime').val() && $(input).getKendoDateTimePicker().value() > $('#EndDateTime').getKendoDateTimePicker().value()) {
                        return false;
                    }
                }
                return true;
            },
            endatetimevalidation: function (input, params) {
                if ($(input).val() && $(input).attr('id') == "EndDateTime") {
                    if ($('#StartDateTime').val() && $(input).getKendoDateTimePicker().value() < $('#StartDateTime').getKendoDateTimePicker().value()) {
                        return false;
                    }
                }
                return true;
            }
        },
        messages: {
            startdatetimevalidation: function (input) {
                return "Start Date can't be greater than End Date.";
            },
            endatetimevalidation: function (input) {
                return "End Date can't be smaller than Start Date.";
            }
        }
    });
})(jQuery, kendo);

希望对您有所帮助！我知道这篇文章很旧，但也许有人也需要这个..

如果您需要更多信息，请参阅此页面： http://demos.telerik.com/aspnet-mvc/grid/editing-custom-validation

【讨论】：