光年模板说明文档
主题
字号
18px

bootstrap-datepicker日期(v4)

v4的版本使用Bootstrap-datepicker 1.9，v4的该插件默认只放了中文简体和繁体的配置文件，如需其他语言的请自行下载。

github地址：https://github.com/uxsolutions/bootstrap-datepicker

文档地址：https://bootstrap-datepicker.readthedocs.io/en/latest/

v3和v4样式上没啥区别，主要在于v4的初始化重新写了一遍，有更多的配置项。

1、给需要用到日期选择器的输入框增加 data-provide="datepicker"。

<input type="text" class="form-control" data-provide="datepicker" data-autoclose="true" />

2、可以在 data-date-highlight="true" 则可以让日期选择器凸显当前日期。

<div class="input-group">
  <input type="text" class="form-control" data-provide="datepicker" data-today-highlight="true" data-autoclose="false" />
    <div class="input-group-append">
    <span class="input-group-text"><i class="mdi mdi-calendar"></i></span>
  </div>
</div>

示例代码用到了输入框组，主要为了演示在输入框后加入日历图标。

3、data-multidate="true" 指定可以选择多个日期。

<input type="text" class="form-control" data-provide="datepicker" data-multidate="true" data-autoclose="false" />

data-autoclose="false"设置为false时，你选完日期后，日历界面并不直接隐藏。

4、当你给 .input-group 的元素加上 data-provide="datepicker"。那么这时候你就可以选择一定时间的范围了（先选最大的时间，再往前选）。

<div class="input-group" data-provide="datepicker">
  <div class="input-group-prepend">
    <span class="input-group-text">从</span>
  </div>
  <input type="text" class="form-control">
  <div class="input-group-prepend input-group-append">
    <span class="input-group-text">至</span>
  </div>
  <input type="text" class="form-control">
</div>

涉及的文件：