日期选择器跳过禁用的一天 Javascript答案

【问题标题】：Date Picker Skip a disabled day Javascript日期选择器跳过禁用的一天 Javascript
【发布时间】：2020-12-15 00:27:28
【问题描述】：

我想跳过禁用日期。

工作：代码可以跳过数组中的日期：

var disabledDates = ["2020-08-07","2020-08-06"] <br />

不工作：代码不会跳过禁用日：

var day = day.getDay();
var monday = 1;

工作 jsfiddle： http://jsfiddle.net/9Lfjdh54/4/

var disabledDates = ["2020-08-07", "2020-08-06"]

$("#picker").datepicker({
  beforeShowDay: function(day) {

    const string = jQuery.datepicker.formatDate('yy-mm-dd', day);
    var day = day.getDay();
    var monday = 1;

    if (day != monday) {
      return [true] && [disabledDates.indexOf(string) == -1]
    } else {
      return [false]
    }
  }
});

$('.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);
});

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

<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">

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

<br/><br/>

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

【问题讨论】：

问题是星期一下的日子没有被跳过，但数组中规定的日子是 skippef 我想跳过所有禁用的日期
你看到我的 jsfiddle 了吗？尝试按下一步它不会跳过星期一以下的日子，因为跳过了 3 个禁用日期。

标签： javascript jquery date datepicker jquery-ui-datepicker

【解决方案1】：

不跳过星期一以下的日子

更具体地说，当点击第二天按钮时，这些不会被跳过。

由于下一个按钮不使用日期选择器来确定哪些日期可用，因此用于禁用日期的相同逻辑需要在下一个按钮中重复使用。

简单来说，这意味着添加星期一检查：

   var day = date.getDay();
   var monday = 1;
 }
 while (disabledDates.indexOf(string) >= 0 || day==monday);

更新小提琴：http://jsfiddle.net/xjq63mv2/

var disabledDates = ["2020-08-07", "2020-08-06"]

$("#picker").datepicker({
  beforeShowDay: function(day) {

    var string = jQuery.datepicker.formatDate('yy-mm-dd', day);
    var day = day.getDay();
    var monday = 1;

    if (day != monday) {
      return [true] && [disabledDates.indexOf(string) == -1]
    } else {
      return [false]
    }
  }
});



$('.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);
    var day = date.getDay();
    var monday = 1;
  }
  while (disabledDates.indexOf(string) >= 0 || day == monday);
  $('#picker').datepicker("setDate", date);
});
$('#picker').datepicker();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">

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

<br/><br/>

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

【讨论】：