时间戳

首页 > 解决方案 > Kendo Grid 内联编辑日期范围验证

javascript - Kendo Grid 内联编辑日期范围验证

问题描述

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

道场演示

#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

标签： javascriptkendo-uikendo-gridkendo-datepicker

解决方案

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

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 字段上。更改事件设置maxPromoValid 字段的日期，并检查当前 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>

道场

推荐阅读