Jquery UI Datepicker - 依赖日期选择器排除 Maxdate 中的假期

Question

我试图在 Dependent Datepicker 中排除 Array Dates 和 Sundays。 first datepicker 工作得非常好，而 second datepicker 不排除 Maxdate 中的数组日期和星期天。 第二个日期选择器必须在 7 个工作日内选择，其中不包括星期日和数组日期。 我相信应该有一个简单的方法来实现这一点。

有什么建议吗？

这是代码:(

$(document).ready(function() { 
    var d = new Date();
    var array = ["10-12-2019","05-12-2019"];

    var monthNames = ["January", "February", "March", "April", "May", "June",
        "July", "August", "September", "October", "November", "December"];
    today = monthNames[d.getMonth()] + ' ' + d.getDate() + ' ' + d.getFullYear();
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);
}
    $('#datepicker2').attr('readonly', 'readonly');

    $('#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');
        var date_diff = Math.ceil((from.getTime() - Date.parse(today)) / 86400000);
        var maxDate_d = date_diff + 7 +'d';
        date_diff = date_diff + 'd';
        $('#datepicker2').val('').removeAttr('readonly').removeClass('hasDatepicker').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 + extra;
    })
    (7)
}); 
    });

});

http://jsfiddle.net/nLveychs/83/

Answer 1

对于您的代码，它几乎是正确的。您只是忘记了第二个日期选择器的一件事。也就是说，您没有将 date_diff 值添加到 maxDate() 匿名函数的返回值中。我打算通过将 date_diff 添加到参数来传递它。尽管如此，我还是发现了一个错误。不能那样做，因为之前任何不可选择的日子都会变成额外的额外日子。因此，添加 date_diff 的唯一方法是从日期选择器 1 的日期开始，并将 maxDate 的匿名函数的返回值添加到 date_diff。

我还去掉了一些不必要的代码。您只需将 datepicker1 日期减去今天的日期即可获得日期差异，而无需解析日期字符串。另外，date_diff 可以保持原样，无需添加“d”。

另外，请注意，当您计算两个日期之间的不同天数时，对于您的代码，它以这种方式工作，因为 datepicker 的日期选择对象设置为一天中的 0 小时。该代码可能不适用于其他情况。确定两个日期之间日差的可靠方法是将它们的小时、分钟、秒和毫秒（如果需要）设置为零。

<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 = ["10-12-2019","05-12-2019"];
   
    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);
    }
    
    $('#datepicker2').attr('readonly', 'readonly');

    $('#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('').removeAttr('readonly').removeClass('hasDatepicker').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++;
            }            
        }
        /*
         * Date diffent have to be added to return value.
         */
        return max + date_diff + extra;
    })
    (7)
}); 
    });

});
</script>

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