Jquery Datepicker - Autofill date based on first date without select

问题

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) :(

Any suggestion?

Here's the code

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

Note

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).

来源：https://stackoverflow.com/questions/59677125/jquery-datepicker-autofill-date-based-on-first-date-without-select

标签

javascript

jquery

laravel

datepicker