Kendo Grid Проверка диапазона дат встроенного редактирования

Мне нужна помощь в моей сетке кендо. Во время встроенного редактирования добавлять или редактировать я использую 4 kendoDatepicker. Я хочу выполнить проверку диапазона дат, например, если я выбираю дату для Booking Date From/Until с -> 01/07/2020 до -> 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

javascript kendo-grid kendo-ui kendo-datepicker
person dontbannedmeagain    schedule 06.07.2020    source источник
comment
Ведьмину версию кендо ты используешь? jQuery? mvc.net? Нужна ли вам проверка на стороне сервера и на стороне клиента, когда вы упоминаете? И эта проверка также применяется во время добавления новой записи и редактирования   -  person Carlos Martins    schedule 06.07.2020
comment
Я использую версию JQuery. Для проверки только на стороне клиента.   -  person dontbannedmeagain    schedule 06.07.2020

Ответы (1)


arrow_upward
1
arrow_downward

Используйте эти параметры в средствах выбора даты бронирования:

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 задают диапазон резервирования с 01.07.2020 по 30.07.2020. Параметр change гарантирует, что каждое изменение будет отражаться в соответствующих полях PromoValid. Событие изменения устанавливает дату max в поле PromoValid, а также проверяет, стала ли текущая дата 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>

Додзё

person DontVoteMeDown    schedule 06.07.2020