Bootstrap双日历插件演示

Bootstrap 的双日历插件，用起来真挺顺手的。是做那种需要用户选时间区间的，比如订酒店、查活动范围啥的，用这个插件能少不少折腾。

双日历的核心玩法就是两个，一个是开始时间，一个是结束时间。加上几行 JS 逻辑，用户一选开始时间，结束时间自动限制不早于它。反过来也一样，逻辑清晰不绕人。

样式这块嘛，得先把Bootstrap的基础包搞定：bootstrap.css、bootstrap.js，还有jQuery别忘了，不然控件不动弹。插件本体一般叫bootstrap-datetimepicker.js，样式文件也要加上。

HTML 结构也蛮，一般长这样：

<div class="input-group">
  <div class="input-group-addon">开始日期</div>
  <input type="text" id="startDate" class="form-control" />
</div>
<div class="input-group">
  <div class="input-group-addon">结束日期</div>
  <input type="text" id="endDate" class="form-control" />
</div>

在页面加载时写点初始化代码：

$(function () {
  $('#startDate').datetimepicker({
    format: 'YYYY-MM-DD',
    useCurrent: false
  });
  $('#endDate').datetimepicker({
    format: 'YYYY-MM-DD',
    useCurrent: false
  });

$('#startDate').on('dp.change', function (e) {
    $('#endDate').data('DateTimePicker').minDate(e.date);
  });
  $('#endDate').on('dp.change', function (e) {
    $('#startDate').data('DateTimePicker').maxDate(e.date);
  });
});

格式设置也挺灵活的，支持语言、日期范围限制什么的，都能自定义。嗯，如果你做的项目是对接用户时间范围输入，建议你试试这个插件，还挺省事的。

想了解更多用法，可以看看这些扩展插件：

• jQuery 加 Bootstrap 双日历日期插件
• jq 双日历日期区间选择
• bootstrap_daterangepicker 双日历选择

如果你从 CDN 引的资源，记得检查下CORS策略，不然调试会抓狂哦。