Multiple dates in Bootstrap date-picker

问题

I am trying to select multiple dates in Boostrap-Datepicker.

I have intialized the datepicker as such, just fine.

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

Now I want to select multiple dates on the calendar:

$('#datepicker2').datepicker('setDate', [new Date(2014, 2, 5),new Date(2014, 3, 5)]);

It's not working. No errors are logged but the dates are not selected.

EDIT: the datepicker version I used had some issue with multidates, I used a previous version and it works - probably a version issue

This works just fine though:

$('#datepicker2').datepicker('setDate', new Date(2014, 2, 5));

回答1:

It is necessary to first define your datepicker as a multidate picker through the options.

$('#datepicker2').datepicker({
  multidate: true
});

Then you can set your dates via the setDates method :

$('.date').datepicker({
    multidate: true
});

$('.date').datepicker('setDates', [new Date(2014, 2, 5), new Date(2014, 3, 5)])

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css" rel="stylesheet"/>
<input type="text" class="form-control date"/>

回答2:

You can also set limit for number of dates to be select. See below example, you will be able to select only 5 dates maximum.

Example

$("#Txt_Date").datepicker({
    format: 'd-M-yyyy',
    inline: false,
    lang: 'en',
    step: 5,
    multidate: 5,
    closeOnDateSelect: true
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css" rel="stylesheet"/>


<input type="text" id="Txt_Date" placeholder="Choose Date" style="cursor: pointer;">

来源：https://stackoverflow.com/questions/25874375/multiple-dates-in-bootstrap-date-picker

标签

jquery

twitter-bootstrap

datepicker