jQuery UI Datepicker-依赖的Datepicker排除Maxdate中的假期 [英] Jquery UI Datepicker - Dependent Datepicker Exclude Holidays in Maxdate

问题描述

我正在尝试从相关日期选择器中排除阵列日期和星期日. 第一个日期选择器效果很好，而第二个日期选择器不排除Maxdate中的数组日期和星期天. 必须在7个工作日内选择第二个日期选择器，该日期应不包括星期日和数组日期. 我相信应该有一种简单的方法来实现这一目标.

I am trying to exclude Array Dates and Sundays in Dependent Datepicker. The first datepicker works really well while the second datepicker doesn't exclude Array dates and sundays in Maxdate. Second datepicker must selectable within 7 working days which should exclude Sunday and Array Dates. I believe there's should be an easy way to achieve this.

有什么建议吗?

这是代码:(

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

推荐答案

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

For your code, it is almost right. You just forgot one thing for the second date picker. That is, you did not add the date_diff value to the return value of the maxDate() anonymous function. I was going to pass the date_diff by adding it to the parameter. Nonetheless, I found a bug. It can't be done that way, because any previous un-selectable days, will turn into additional extra days. Thus, the only way to add date_diff is start from the day of date picker1 and add the return value of maxDate's anonymous function to date_diff.

我还取出了一些不必要的代码.您只需将datepicker1 date减去今天的日期即可获得日期差异，而无需解析日期字符串.另外，date_diff可以照原样进行，而无需在其中添加"d".

I also took out some unnecessary codes. You can just get the date differences simply subtracting datepicker1 date to today date without needing to parse a date string. Plus, date_diff can be as was without needing a "d" to be added to it.

此外，请注意，当您计算两个日期之间的不同日期时，对于您的代码，它可以那样工作，因为datepicker的日期选择对象设置为一天中的0小时.该代码可能不适用于其他情况.确定两个日期之间的日差的肯定方法是将它们的小时，分​​钟，秒和毫秒(如果需要)设置为零.

Also, take note that, when you calculate the different days between two dates, for your code, it work that way, because datepicker's date picked object is set to the 0 hour of the day. That code may not work for other scenario. The for sure way to get the day difference between two dates is by setting their hours, minutes, seconds, and milliseconds(if needed) to zeroes.

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

这篇关于jQuery UI Datepicker-依赖的Datepicker排除Maxdate中的假期的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！