代码之家 › 专栏 › 技术社区 › nicholaswmin

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

datepicker twitter-bootstrap jquery

nicholaswmin · 技术社区 · 11 年前

我正在尝试在中选择多个日期 Boostrap-Datepicker.

我已经将日期选择器初始化为这样,很好。

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

现在我想 select multiple dates 在日历上:

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

它不起作用。未记录任何错误,但未选择日期。

编辑: 我使用的日期选择器版本在多日期方面有一些问题,我使用的是以前的版本,它可以工作-可能是版本问题

不过,这一点很好:

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

2 回复 | 直到 8 年前

Manish Nayak 7 年前

首先需要通过选项将日期选择器定义为多日期选择器。

$('#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"/>

Manish Nayak 7 年前

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

实例

$("#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;">

推荐文章

xajetin · 导航不更改滚动上的颜色

3 年前

Noor ul ain Ibrahim · 如何在一行中制作两个大小相同的按钮?

3 年前

Bryan Santos · 固定表头与引导

3 年前

Nicolas Berthier · Bootstrap 5基于内容的包装

3 年前

tym · 根据用户偏好显示字段

3 年前

Sheryar Khan · 如何仅使用html、css、bootstrap、javascript/jquery创建html页面?

3 年前

Pavel · 当验证DIV可见时,引导网格会移动

7 年前

Sam · 在标题中嵌入Bootstrap 3导航栏

7 年前

Alexander David · 折叠卡打开,然后立即再次关闭

7 年前

Sandeep Bhardwaj · div的一致行为,与设备分辨率无关

7 年前