Jquery Datepicker - дата автозаполнения на основе первой даты без выбора

Question

Ниже у меня есть 2 DatePicker, который пользователь должен выбрать, а затем 2-й DatePicker изменит минимальную дату в соответствии с datepicker1, но моя цель - установить 3-ую дату в datepicker1 и установить 7-ую дату в DatePicker 2 без выбирая их (Авто).

Пока я могу отображать первый сборщик дат с последним доступным днем ​​(3-я дата), пока я не могу получить даты для 2-го сборщика дат (7-е): (

Любое предложение?

Вот код

$(document).ready(function() { 
    var array = ["15-01-2020","18-01-2020"];
   
    function includeDate(date) {
        var dateStr = jQuery.datepicker.formatDate('dd-mm-yy', date);
        // Date 0 = Sunday & 6 = Saturday
        return date.getDay() !== 0 && array.indexOf(dateStr) === -1;
    }

    function getTomorrow(date) {
        return new Date(date.getFullYear(), date.getMonth(), date.getDate() + 1);
    }
    
   

    $('#datepicker1').datepicker(
        {
      defaultDate: "+1d",
      inline: true,
      showOtherMonths: true,
      changeMonth: true,
      selectOtherMonths: true,
      required: true,
      showOn: "focus",
      numberOfMonths: 1,
      minDate: 1,
      
    beforeShowDay: function(date) {
        return [includeDate(date)];
    },
    maxDate: (function(max) {
        var nextAvailable = new Date();
        var count = 0;
        var extra = 0;
        while(count < max) {
            nextAvailable = getTomorrow(nextAvailable);             
            if ( !includeDate(nextAvailable) ) {
                extra++;  
            } else {
                count++;
            }            
        }
        return max + extra;
    })
    (3)   
});
    $('#datepicker1').change(function () {
        var from = $('#datepicker1').datepicker('getDate');
        // Date diff can be obtained like this without needing to parse a date string.
        var date_diff = Math.ceil((from - new Date()) / 86400000);
        
        $('#datepicker2').val('').datepicker({
            inline: true,
      showOtherMonths: true,
      changeMonth: true,
      selectOtherMonths: true,
      required: true,
      showOn: "focus",
      numberOfMonths: 1,
      minDate: date_diff + 1,
    beforeShowDay: function(date) {
      return [includeDate(date)];
    },
    
    maxDate: (function(max) {
        var nextAvailable = $('#datepicker1').datepicker('getDate');
        var count = 0;
        var extra = 0;
        while(count < max) {
            nextAvailable = getTomorrow(nextAvailable);             
            if ( !includeDate(nextAvailable) ) {
                extra++;
            } else {
                count++;
            }            
        }

        return max + date_diff + extra;
    })
    (7)
}); 
    });
   $( "#datepicker1" ).datepicker({ dateFormat: "yy-mm-dd"}).datepicker("setDate", new Date()+100);
});

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
<script src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<p>datepicker1 <input id="datepicker1"></p>
<p>datepicker2 <input id="datepicker2"></p>

Примечание

Минимальная дата первого выбора даты - завтра, а maxdate - 3 дня, исключая праздничные дни и по воскресеньям, в то время как 2-й указатель даты выбирается из даты 1-го числа, а максимальное число составляет 7 дней, исключая праздничные и воскресные дни. Я просто хочу, чтобы последние 3-е и 7-е даты отображались на входе средства выбора даты без их выбора. Оба ввода не должны быть доступны для выбора (только для чтения).

Answer 1

Обновлено: Сначала я подумал, что произошла ошибка с кодом ответа (я на самом деле не смотрел его), который я предоставил вам из предыдущего ответа. Но после повторного просмотра старого кода я понял, что в старом коде нет ошибки, поскольку класс datepicker удаляется при каждой инициализации объекта выбора даты. Таким образом, я обновил этот ответ, чтобы отразить это.

Этот код похож на другой код, который я вам дал. Это просто, что когда дело доходит до DatePicker в подразделении, это другое. Тем не менее, я прокомментировал это в коде. Для третьего средства выбора даты я составляю это средство выбора даты, когда первая функция maxDate запускается для первого средства выбора даты, а затем, когда запускается вторая функция выбора даты, функция maxDate. Поскольку вы не хотите, чтобы пользователь что-либо делал с третьим средством выбора даты, кроме его просмотра, я использовал разделение вместо поля ввода в качестве заполнителя для третьего средства выбора даты. Они все еще могут выбрать дату, но она ничего не сделает. Вы, вероятно, можете добавить стиль к этим датам, чтобы казалось, что их выбранные и невыбранные состояния совпадают. Также можно добавить подсказки.

Для этого ответа я также дам вам две версии. Вторая версия лучше оптимизирована и более гибкая. Версия 1 и 2 имеют одинаковый код. Тем не менее, вторая версия присваивает объекту jQuery из 3 указателей даты 3 переменным, так что каждый раз, когда необходимо использовать эти деления, это не заставляет jQuery снова искать эти объекты деления. Кроме того, вам легче изменить их контекст именования из одного места.

Попробуйте поэкспериментировать с выбором первого дня, и вы увидите, что дни будут динамически меняться. Кроме того, если вы ссылаетесь на любой из моих ответов и обнаруживаете ошибки в них, не стесняйтесь сообщать мне об ошибках в комментарии. Спасибо.

Версия 1:

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
<script src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<script>
$(document).ready(function() { 
    var array = ["15-01-2020","18-01-2020"];
    // Store date for datepicker3 here
    var dp3 = [];
   
    function includeDate(date) {
        var dateStr = jQuery.datepicker.formatDate('dd-mm-yy', date);
        // Date 0 = Sunday & 6 = Saturday
        return date.getDay() !== 0 && array.indexOf(dateStr) === -1;
    }

    function getTomorrow(date) {
        return new Date(date.getFullYear(), date.getMonth(), date.getDate() + 1);
    }

    function dp2ini () {
        var from = $('#datepicker1').datepicker('getDate');
        // Date diff can be obtained like this without needing to parse a date string.
        var date_diff = Math.ceil((from - new Date()) / 86400000);
        
        /* 
         * For an input field, the hasDatepicker class have to removed
         * for the options to take effect if re-initialize. This, can
         * also be done with the destroy option of datepicker
         * $('#datepicker2').datepicker("destroy"). However, it seem, 
         * removing its class is faster in this case.
         *
         * On the other hand if a datepicker widget is a part
         * or a division, it has to be destroy as the html
         * for the widget is placed as html content inside that division,
         * and simply just removing the hasDatepicker class from that division
         * will cause the reinitializer to write in a second datepicker widget.
         * 
         * In a division where it only contained the picker 
         * object, it is faster to just set the HTML to blank
         * and remove the hasDatepicker class. On the otherhand,
         * for more complicated division, it is better to use,
         * the destroy option from "datepicker".
         */
        $('#datepicker2').val('').removeClass("hasDatepicker");
        
        $('#datepicker2').datepicker({
            inline: true,
            showOtherMonths: true,
            changeMonth: true,
            selectOtherMonths: true,
            required: true,
            showOn: "focus",
            numberOfMonths: 1,
            minDate: date_diff + 1,
          beforeShowDay: function(date) {
            return [includeDate(date)];
          },
    
          maxDate: (function(max) {
              var nextAvailable = $('#datepicker1').datepicker('getDate');
              
              var count = 0;
              var extra = 0;
              while(count < max) {
                  nextAvailable = getTomorrow(nextAvailable);             
                  if ( !includeDate(nextAvailable) ) {
                      extra++;
                  } else {
                      count++;
                  }            
              }

              dp3[1] = new Date();
              dp3[1].setDate( dp3[1].getDate() + max + date_diff + extra );
              dp3[1] = dp3[1].toDateString();
        
              // Destroy dp3 and re-initalize it.
              //$('#datepicker3').datepicker("destroy"); 
              
              $('#datepicker3').empty();
              $('#datepicker3').removeClass("hasDatepicker");
              
              $( "#datepicker3" ).datepicker({
                  maxDate: max + date_diff + extra,
                beforeShowDay: function(date){
                    return [date.toDateString() == dp3[0] 
                         || date.toDateString() == dp3[1]
                           ];
                }
              });

              return max + date_diff + extra;
          })(7)
        });
    }
    
    $('#datepicker1').datepicker({
      defaultDate: "+1d",
      inline: true,
      showOtherMonths: true,
      changeMonth: true,
      selectOtherMonths: true,
      required: true,
      showOn: "focus",
      numberOfMonths: 1,
      minDate: 1,
    
    beforeShowDay: function(date) {
        return [includeDate(date)];
    },
    
    maxDate: (function(max) {
        var nextAvailable = new Date();        
        var count = 0;
        var extra = 0;
        while(count < max) {
            nextAvailable = getTomorrow(nextAvailable);             
            if ( !includeDate(nextAvailable) ) {
                extra++;  
            } else {
                count++;
            }            
        }
        
        /* Initialize datepicker 3 here. */
        // NOTE: If dp1 needed to be reinitialize dp3
        //       also have to be destroyed and reinitialize.
        
        // The last day will always be a pick-able one...
        // Because if it wasn't another day would had been added to it.
        dp3[0] = new Date();
        dp3[0].setDate( dp3[0].getDate() + max + extra );
        dp3[0] = dp3[0].toDateString();
        
        $( "#datepicker3" ).datepicker({
          maxDate: max + extra,
          beforeShowDay: function(date){
            return [date.toDateString() == dp3[0]];
          }
        
        });

        return max + extra;
    })
    (3)   
});

  $( "#datepicker1" ).change(dp2ini);
  // Also trigger the change event.
  $( "#datepicker1" ).datepicker({ dateFormat: "yy-mm-dd"}).datepicker("setDate", new Date()+100).trigger("change");
});

</script>

<p>datepicker1 <input id="datepicker1"></p>
<p>datepicker2 <input id="datepicker2"></p>
<div id="datepicker3"></div>

Версия 2:

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
<script src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<script>
$(document).ready(function() { 
    var array = ["15-01-2020","18-01-2020"];
    // Store date for datepicker3 here
    var dp3 = [];
    var datepicker1 = $('#datepicker1')
        datepicker2 = $('#datepicker2'),
        datepicker3 = $('#datepicker3');
   
    function includeDate(date) {
        var dateStr = jQuery.datepicker.formatDate('dd-mm-yy', date);
        // Date 0 = Sunday & 6 = Saturday
        return date.getDay() !== 0 && array.indexOf(dateStr) === -1;
    }

    function getTomorrow(date) {
        return new Date(date.getFullYear(), date.getMonth(), date.getDate() + 1);
    }

    function dp2ini () {
        var from = datepicker1.datepicker('getDate');
        // Date diff can be obtained like this without needing to parse a date string.
        var date_diff = Math.ceil((from - new Date()) / 86400000);
        
        /* 
         * For an input field, the hasDatepicker class have to removed
         * for the options to take effect if re-initialize. This, can
         * also be done with the destroy option of datepicker
         * $('#datepicker2').datepicker("destroy"). However, it seem, 
         * removing its class is faster in this case.
         *
         * On the other hand if a datepicker widget is a part
         * or a division, it has to be destroy as the html
         * for the widget is placed as html content inside that division,
         * and simply just removing the hasDatepicker class from that division
         * will cause the reinitializer to write in a second datepicker widget.
         * 
         * In a division where it only contained the picker 
         * object, it is faster to just set the HTML to blank
         * and remove the hasDatepicker class. On the otherhand,
         * for more complicated division, it is better to use,
         * the destroy option from "datepicker".
         */
        datepicker2.val('').removeClass("hasDatepicker");
        
        datepicker2.datepicker({
            inline: true,
            showOtherMonths: true,
            changeMonth: true,
            selectOtherMonths: true,
            required: true,
            showOn: "focus",
            numberOfMonths: 1,
            minDate: date_diff + 1,
          beforeShowDay: function(date) {
            return [includeDate(date)];
          },
    
          maxDate: (function(max) {
              var nextAvailable = datepicker1.datepicker('getDate');
              
              var count = 0;
              var extra = 0;
              while(count < max) {
                  nextAvailable = getTomorrow(nextAvailable);             
                  if ( !includeDate(nextAvailable) ) {
                      extra++;
                  } else {
                      count++;
                  }            
              }

              dp3[1] = new Date();
              dp3[1].setDate( dp3[1].getDate() + max + date_diff + extra );
              dp3[1] = dp3[1].toDateString();
        
              // Destroy dp3 and re-initalize it.
              //$('#datepicker3').datepicker("destroy"); 
              
              datepicker3.empty();
              datepicker3.removeClass("hasDatepicker");
              
              datepicker3.datepicker({
                  maxDate: max + date_diff + extra,
                beforeShowDay: function(date){
                    return [date.toDateString() == dp3[0] 
                         || date.toDateString() == dp3[1]
                           ];
                }
              });

              return max + date_diff + extra;
          })(7)
        });
    }
    
    datepicker1.datepicker({
      defaultDate: "+1d",
      inline: true,
      showOtherMonths: true,
      changeMonth: true,
      selectOtherMonths: true,
      required: true,
      showOn: "focus",
      numberOfMonths: 1,
      minDate: 1,
    
    beforeShowDay: function(date) {
        return [includeDate(date)];
    },
    
    maxDate: (function(max) {
        var nextAvailable = new Date();        
        var count = 0;
        var extra = 0;
        while(count < max) {
            nextAvailable = getTomorrow(nextAvailable);             
            if ( !includeDate(nextAvailable) ) {
                extra++;  
            } else {
                count++;
            }            
        }
        
        /* Initialize datepicker 3 here. */
        // NOTE: If dp1 needed to be reinitialize dp3
        //       also have to be destroyed and reinitialize.
        
        // The last day will always be a pick-able one...
        // Because if it wasn't another day would had been added to it.
        dp3[0] = new Date();
        dp3[0].setDate( dp3[0].getDate() + max + extra );
        dp3[0] = dp3[0].toDateString();
        
        datepicker3.datepicker({
          maxDate: max + extra,
          beforeShowDay: function(date){
            return [date.toDateString() == dp3[0]];
          }
        
        });

        return max + extra;
    })
    (3)   
});

  datepicker1.change(dp2ini);
  // Also trigger the change event.
  datepicker1.datepicker({ dateFormat: "yy-mm-dd"}).datepicker("setDate", new Date()+100).trigger("change");
});

</script>

<p>datepicker1 <input id="datepicker1"></p>
<p>datepicker2 <input id="datepicker2"></p>
<div id="datepicker3"></div>