在 Bootstrap-datepicker 中禁用几个日期范围

Question

我正在尝试使用 Bootstrap-Datepicker 中的 BeforeShowDay 功能禁用几个日期范围数组。

我有这样的代码：

 var dateArray2 = getDates(new Date("2016-12-20 14:57:28"), (new Date("2016-12-22 14:57:28")).addDays(0));

 var dateArray3 = getDates(new Date("2016-12-22 14:57:28"), (new Date("2016-12-25 14:57:28")).addDays(0));

 var dateArr = new Array();

 dateArr.push(dateArray2);
 dateArr.push(dateArray3);

//Datepicker init
     $('.date').datepicker({
            format: 'dd-mm-yyyy',
            startDate: date,
            autoclose: true,
            beforeShowDay: function (date) {
                var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
                $.each(dateArr,function (key, value) {
                    return value.indexOf(string) == -1;
                });
            }
        });

但是循环使用日期的数组不起作用，并且我没有禁用日期。

如何禁用包含日期的 2,3 或更多数组？

谢谢。

Answer 1

你可以使用jQuery.inArray代替jQuery.each。

要将日期参数转换为“yy-mm-dd”格式，您可以使用moment.js。

sn-p：

var date = new Date();
var forbiddeneDates = ['16-12-18','16-12-19','16-12-20'];


$('.date').datepicker({
  format: 'dd-mm-yyyy',
  startDate: date,
  autoclose: true,
  beforeShowDay: function (date) {
    var dateStr = moment(date).format('YY-MM-DD');
    return $.inArray(dateStr,forbiddeneDates) == -1;
  }
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script>

<div class="input-group date">
    <input type="text" class="form-control">
    <div class="input-group-addon">
        <span class="glyphicon glyphicon-th"></span>
    </div>
</div>