简单介绍

官方地址:bootstrap-datepicker — bootstrap-datepicker documentation


这个一个日期选择器的插件,用来规范日期输入格式,官方提供示例如下图所示。


image.png


引入文件

该插件并不复杂,引入1个 css 文件,2个 js 文件即可,如下代码所示:


<!-- bootstrap datepicker -->
<link rel="stylesheet" href="/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css">

<!-- bootstrap datepicker -->
<script src="/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>
<script src="/bootstrap-datepicker/dist/locales/bootstrap-datepicker.zh-CN.min.js"></script>


安装方法同样可以采用 bower 包管理器, bower install --save bootstrap-datepicker 命令即可。


HTML 部分

该插件主要应用在 input 标签上,前台代码如下:


<div class="form-group col-lg-4">
  <label for="date">日期</label>
  <input type="text" class="form-control date" name="date" autocomplete="off" required>
</div>


样式如下图:


image.png


这里需要注意的是:一定要记得关于浏览器的自动填充,不然会很烦的。关闭方法:添加属性  autocomplete="off" 。


JS 调用

这个部分,官方的示例做得非常好,建议直接去官方提供的 Demo 上操作,点击几下就会大概明白各个参数的使用方法了。下面给出我比较常用的一种配置:


// 日期选择框
$('input.date').datepicker({
  format: "yyyy/mm/dd",
  weekStart: 7,
  maxViewMode: 2,
  language: "zh-CN",
  // daysOfWeekDisabled: "0,6",
  // daysOfWeekHighlighted: "0,6",
  autoclose: true,
  todayHighlight: true,
  // startDate: new Date(),
  // endDate: new Date()
}).on('show', function (e) {
  e.preventDefault();
  e.stopPropagation(); // 禁止触发父元素事件
}).on('hide', function (e) {
  $(this).blur();
  e.stopPropagation(); // 禁止触发父元素事件
});


这里需要介绍的是下面两个参数:



如果只让选当天,那么就这么设置:


startDate: new Date(),
endDate: new Date(),