Bootstrap日期选择器中的多个日期

时间:2014-09-16 16:52:44

标签: jquery twitter-bootstrap datepicker

我正在尝试在Boostrap-Datepicker.

中选择多个日期

我已经初始化了datepicker,就好了。

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

现在我想在日历上select multiple dates

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

它无法正常工作。没有记录错误,但未选择日期。


编辑:我使用的datepicker版本在使用多版本时遇到了一些问题,我使用的是以前的版本并且它有效 - 可能是版本问题


虽然效果很好:

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

2 个答案:

答案 0 :(得分:16)

首先必须通过选项将您的日期选择器定义为多日期选择器。

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

然后,您可以通过setDates方法设置日期:



$('.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"/>
&#13;
&#13;
&#13;

答案 1 :(得分:1)

您还可以设置要选择的日期数限制。参见下面的示例,您最多只能选择5个日期。

示例

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