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"`。  ```html <input type="text" class="form-control" data-provide="datepicker" data-autoclose="true" /> ``` 2、可以在 `data-date-highlight="true"` 则可以让日期选择器凸显当前日期。  ```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"` 指定可以选择多个日期。  ```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"`。那么这时候你就可以选择一定时间的范围了（先选最大的时间，再往前选）。  ```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`