bootstrap-datepicker日期选择

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

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

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

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

![](/uploads/images/20230107/ade1c0e5093617064ed6628d5da2e177.png)

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

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

![](/uploads/images/20230107/7f0ca1d6125349b3148e0e70962efe32.png)

```html
<div class="input-group">
  <input type="text" class="form-control" data-provide="datepicker" data-today-highlight="true" data-autoclose="false" />
  <span class="input-group-text"><i class="mdi mdi-calendar"></i></span>
</div>
```
示例代码用到了输入框组，主要为了演示在输入框后加入日历图标。

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

![](/uploads/images/20230107/72451e57d93edad14cd3c239bdc0f52b.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/20230107/2980302b060bed5768d33f972b05632e.png)

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

模板页面：http://lyear.itshubao.com/v5/lyear_js_datepicker.html

涉及的文件：
- `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`