javascript - Jquery Datepicker - 根据第一个日期自动填充日期，无需选择

Question

Below i have a 2 datepicker which user have to select them and then the 2nd datepicker will change the min date according to datepicker1 but my goal is to set the 3rd date in datepicker1 and set 7th date in datepicker 2 without selecting them(Auto).

So far i can able to display the first datepicker with last available day(3rd date) while i still can't achieve the dates for 2nd datepicker(7th) :(

有什么建议吗？

这是代码

$(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>

注意

The first datepicker min date is from tomorrow and maxdate is 3 days which exclude holidays and sundays while the 2nd datepicker mindate is based on 1st datepicker date and maxdate is 7 days which exclude holidays and sundays. I just want the last 3rd and 7th date display in the datepicker input without selecting them.Both input should not available for choosing(Read-Only).

Answer 1

更新:起初，我认为我从之前的答案中为您提供的答案代码有一个错误(我没有真正查看它)。但是在再次查看旧代码后，我意识到旧代码没有错误，因为每次日期选择器对象初始化时，日期选择器类都会被删除。因此，我更新了这个答案以反射(reflect)这一点。

对于此代码，它与我给您的其他代码类似。只是当涉及到分区中的日期选择器时，情况有所不同。但是，我将其注释到代码中。对于第三个日期选择器，我在第一个日期选择器运行第一个 maxDate 函数时编写该日期选择器，然后在运行第二个日期选择器函数 maxDate 函数时编写该日期选择器。由于您不希望用户对第三个日期选择器执行任何操作(除了看到它)，因此我使用除法而不是输入字段作为第三个日期选择器的占位符。他们仍然可以选择日期，但不会执行任何操作。您可能可以为这些日期添加样式，以使它们的选定状态和未选定状态看起来相同。此外，还可以添加工具提示。

对于这个答案，我也给你两个版本。第二个版本优化得更好，也更灵活。版本 1 和 2 是相同的代码。尽管如此，第二个版本将 3 个日期选择器的 jQuery 对象分配给 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>