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"`。

![](/uploads/images/20211229/ac98ce6ba5c7a96e6f38a0c3e4097ad6.png)
```html
<input type="text" class="form-control" data-provide="datepicker" data-autoclose="true" />
```

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

![](/uploads/images/20211228/7b14f1dc228fb0769b43f99f5c593fdc.png)
```html
<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"` 指定可以选择多个日期。

![](/uploads/images/20211229/0aff7cdf3501ccd47f2fcc600e323007.png)

```html
<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"`。那么这时候你就可以选择一定时间的范围了（先选最大的时间，再往前选）。

![](/uploads/images/20211229/3b8cb0d90885e38bd302bc4118440309.png)

```html
<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>
```

涉及的文件：
- `lyear_js_datepicker.html`
- `js/bootstrap-datepicker/bootstrap-datepicker3.min.css`
- `js/bootstrap-datepicker/bootstrap-datepicker.min.js`
- `js/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js`