Kendo Grid 内联编辑日期范围验证答案

【问题标题】：Kendo Grid Inline editing date range validationKendo Grid 内联编辑日期范围验证
【发布时间】：2020-07-06 08:10:33
【问题描述】：

我的剑道网格需要帮助。在内联编辑添加或编辑期间，我使用 4 kendoDatepicker。我想做一个日期范围验证，例如，如果我从-> 01/07/2020 到-> 30/07/2020 选择Booking Date From/Until 的日期，那么当我选择Promo Valid From/Until 时，我需要确保促销的有效日期范围不能超过预订日期范围从/到。知道如何实现这一目标吗？此验证也适用于添加新记录和编辑

DEMO IN DOJO

#Correct
       Booking Date From <----------------------------------------------> Booking Date Until
                   Promo Valid From <---------------------------> Promo Valid Until


#False
       Booking Date From <--------------------------------> Booking Date Until
    Promo Valid From <---------------------------> Promo Valid Until

       Booking Date From <--------------------------------> Booking Date Until
                  Promo Valid From <---------------------------> Promo Valid Until

【问题讨论】：

你用的是女巫版的剑道吗？ jQuery？ mvc.net?当您提到“并且此验证也适用于添加新记录和编辑期间”时，您是否需要服务器端和客户端验证
我使用的是 JQuery 版本。仅用于客户端验证。

标签： javascript kendo-ui kendo-grid kendo-datepicker

【解决方案1】：

在您的预订日期选择器上使用这些参数：

min: (new Date(2020, 6, 1)),
max: (new Date(2020, 6, 30)),
change: function() {
    window.setTimeout(() => {
       let datePicker = $('#promoValidFrom').data('kendoDatePicker');
        
        datePicker.max(this.value());
        
        if (datePicker.value() > this.value()) {
          datePicker.value(this.value());
        }
    });
}

参数 min 和 max 将设置从 2020-07-01 到 2020-07-30 的预订范围。参数change 将确保每次更改都反映在相关的 PromoValid 字段中。更改事件设置 PromoValid 字段的 max 日期，并检查当前 PromoValid 日期是否大于相关的预订日期，是否设置为相同的预订日期。

不要忘记在小部件初始化后立即使用.data('kendoDatePicker').trigger('change');。它在用户开始与这些字段交互之前第一次运行change 事件。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Untitled</title>

  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.2.617/styles/kendo.common.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.2.617/styles/kendo.rtl.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.2.617/styles/kendo.default.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.2.617/styles/kendo.mobile.all.min.css">

  <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2020.2.617/js/angular.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2020.2.617/js/jszip.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2020.2.617/js/kendo.all.min.js"></script></head>
<body>
  
   <div id="grid"></div>
  
<script>
  var dataSource = [{
    'name'                      : 'Special 50% Discount',
    'bookingDateFrom' : '2020-07-01',
    'bookingDateUntil': '2020-07-30',
    'promoValidFrom' : '2020-07-01',
    'promoValidUntil': '2020-07-29'
  },{
    'name'                      : '10% Member',
    'bookingDateFrom' : '2020-06-01',
    'bookingDateUntil': '2020-06-20',
    'promoValidFrom' : '2020-06-02',
    'promoValidUntil': '2020-06-10'
  }];
      
  var grid = $('#grid').kendoGrid({
    dataSource: dataSource,
    editable: "inline",
    toolbar: [{ name: "create", text: "Add" }],
    columns: [
      { field: "name", title: "Promo Name" },
      
      { field: "bookingDateFrom", title: "Booking Date From", format: "{0:MM/dd/yyyy}", 
         editor: BookingDateFrom},
      
      
      { field: "bookingDateUntil", title: "Booking Date Until", format: "{0:MM/dd/yyyy}",
         editor: BookingDateUntil},
  
      
      { field: "promoValidFrom", title: "Promo Valid From", format: "{0:MM/dd/yyyy}",
        editor: PromoValidFrom},
      
      
      { field: "promoValidUntil", title: "Promo Valid Until", format: "{0:MM/dd/yyyy}",
        editor: PromoValidUntil},
      
      { command: ["edit", "destroy"], title: " " }
    ]
  });
  
  
  function BookingDateFrom(container, options){
    $('<input type="text" name="' + options.field + '"  id="' + options.field + '" />')
    .appendTo(container)
      .kendoDatePicker({
        min: new Date(),
        month: {
            empty: '<div class="k-state-disabled">#= data.value #</div>'
        },
        format: "MM/dd/yyyy",
        min: (new Date(2020, 6, 1)),
        max: (new Date(2020, 6, 30)),
        change: function() {
          window.setTimeout(() => {
            let datePicker = $('#promoValidFrom').data('kendoDatePicker');
            
            datePicker.max(this.value());
            
            if (datePicker.value() > this.value()) {
              datePicker.value(this.value());
            }
          });
        }
        }).data('kendoDatePicker').trigger('change');
        $('<span class="k-invalid-msg" data-for="bookingDateFrom"></span>').appendTo(container);
  }  
  

  function BookingDateUntil(container, options){
    $('<input type="text" name="' + options.field + '"  id="' + options.field + '" />')
      .appendTo(container)
      .kendoDatePicker({
        month: {
            empty: '<div class="k-state-disabled">#= data.value #</div>'
        },
        format: "MM/dd/yyyy",
        min: (new Date(2020, 6, 1)),
        max: (new Date(2020, 6, 30)),
        change: function() {
          window.setTimeout(() => {
            let datePicker = $('#promoValidUntil').data('kendoDatePicker');
            
            datePicker.max(this.value());
            
            if (datePicker.value() > this.value()) {
              datePicker.value(this.value());
            }
          });
        }
        }).data('kendoDatePicker').trigger('change');
        $('<span class="k-invalid-msg" data-for="bookingDateUntil"></span>').appendTo(container);
  }  
 
  
  
  function PromoValidFrom(container, options){
    $('<input type="text" name="' + options.field + '"  id="' + options.field + '" />')
    .appendTo(container)
      .kendoDatePicker({
        month: {
            empty: '<div class="k-state-disabled">#= data.value #</div>'
        },
        format: "MM/dd/yyyy"
        });
        $('<span class="k-invalid-msg" data-for="promoValidFrom"></span>').appendTo(container);
  }  
  

  function PromoValidUntil(container, options){
    $('<input type="text" name="' + options.field + '"  id="' + options.field + '" />')
      .appendTo(container)
      .kendoDatePicker({
        month: {
            empty: '<div class="k-state-disabled">#= data.value #</div>'
        },
        format: "MM/dd/yyyy"
        });
        $('<span class="k-invalid-msg" data-for="promoValidUntil"></span>').appendTo(container);
  }  
  

</script>
</body>
</html>

Dojo

【讨论】：