Kendo 网格内联编辑日期范围验证

Question

我的 kendo 网格需要帮助。在内联编辑添加或编辑期间，我使用 4 kendoDatepicker。我想进行日期范围验证，例如，如果我 select 从 -> 01/07/2020 到 -> 30/07/2020 的 Booking Date From/Until 日期，那么当我 select Promo Valid From/Until 我需要确保促销有效日期范围不得超过预订日期范围 from/until。知道我怎样才能做到这一点？此验证也适用于 Add New Record 和 Edit

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

Answer 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

Kendo 网格内联编辑日期范围验证

Kendo Grid Inline editing date range validation

javascript

kendo-ui

kendo-grid

kendo-datepicker