关于bootstrap datepicker的使用

我们经常会遇到输入框需要点击弹出日期选择器的情况，这一功能可以通过bootstrap datepicker来完成，具体使用步骤如下：（bootstrap datepicker的官方文档说明地址：https://bootstrap-datepicker.readthedocs.io/en/latest/）

第一步：下载源码

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

第二步：引入代码

下载下来的文件中有个dist文件夹，可以将这个文件夹放到自己的项目文件夹中

dist文件夹 dist文件夹下的css文件 dist文件夹下的就是文件

将css文件和js文件引入到自己的程序中去，另外还需要引入jquery，因为booststrap中的$符号是依赖于jquery的。在dist文件夹中还有个local文件夹是用来切换日期的语言的，有需要的话可以引入使用。

具体引入的文件如图：

引入文件后可以实例化datepicker，在html中写入一个input输入框，之后在js中$('').datepicker({})即可。或者不在script中实例化，直接在input中加上data-provide="datepicker"即可，即：<input type="text" class="container" data-provide="datepicker">也行。

如图：

以上是bootstrap datepicker的最基本使用。

更改默认数据样式：

我们可以看到选择日期时，默认的样式是12/09/2019的样式。

我们如果想展示成12-09-2019的话，可以修改，修改方式如下：

在script中datepicker实例的时候加上format：‘mm-dd-yyyy’即可。也可以通过下面2种方式更改默认样式：

1.直接在目标元素上用data-XXX的方式更改样式。

也可以通过直接在<input type="text" class="container" data-date-format="mm-dd-yyyy">中加上data-date-format="mm-dd-yyyy"的方式更改默认样式。

2.通过更改$.fn.datepicker.defaults哈希值直接修改所有选项的默认值：

$.fn.datepicker.defaults.format="mm-dd-yyyy";

具体代码如图：

无冲突模式：

如果担心bootstrap datepicker与jquery的datepicker冲突，可以使用无冲突模式，具体代码如下：

vardatepicker=$.fn.datepicker.noConflict();

$.fn.bootstrapDP=datepicker;