Disable few date ranges in Bootstrap-datepicker

问题

I'm trying to disable few date range arrays using BeforeShowDay fucntion in Bootstrap-Datepicker.

I have such code:

 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;
                });
            }
        });

But looping the array with dates not working and I have no dates disabled.

How can I disable 2,3 or more arrays with dates?

Thanks.

回答1:

Instead of jQuery.each you may use jQuery.inArray.

In order to convert the date parameter to the format 'yy-mm-dd' you can use moment.js.

The snippet:

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>

来源：https://stackoverflow.com/questions/41199372/disable-few-date-ranges-in-bootstrap-datepicker

标签

javascript

jquery

twitter-bootstrap

datepicker