javascript - 移动日期但跳过 datepicker jquery 中禁用的日期？

Question

我想跳过日期选择器中禁用的日期，

<div id="picker"></div>

<br/><br/>

<button class="next-day">Next</button>
<button class="prev-day">Previous</button>

这是我关于禁用日期的代码:

var disabledDates = ["2020-03-28","2020-03-27","2020-03-26"]
 $('#picker').datepicker({
    beforeShowDay: function(date){
        var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
        return [ disabledDates.indexOf(string) == -1 ]
    }
});

我的日期选择器代码

$('#picker').datepicker();

$('.next-day').on("click", function () {
    var date = $('#picker').datepicker('getDate');
    date.setTime(date.getTime() + (1000*60*60*24))
    $('#picker').datepicker("setDate", date);
});

$('.prev-day').on("click", function () {
    var date = $('#picker').datepicker('getDate');
    date.setTime(date.getTime() - (1000*60*60*24))
    $('#picker').datepicker("setDate", date);
});

这是我的 fiddle http://jsfiddle.net/3zoat0u6/1/

Answer 1

您可以在下一个/上一个事件处理程序中检查禁用日期，并继续添加/减去一天，直到超过禁用日期。例如:

$('.next-day').on("click", function () {
    var date = $('#picker').datepicker('getDate');
    do {
        date.setTime(date.getTime() + (1000*60*60*24));
      var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
    }
    while (disabledDates.indexOf(string) >= 0) ;
    $('#picker').datepicker("setDate", date);
});

Updated JSfiddle