Question

如何使用bootstrap的daterangepicker插件

Answer 1

　　1
　　首先，我们将这款日期控件下载下来。百度bootstrap-daterangepicker即可。
　　2

　　下载下来解压的文件如图。
　　主要文件有
　　daterangepicker.js
　　moment.js
　　bootstrap.min.css
　　daterangepicker-bs3.css
　　即两个js文件，两个css文件。
　　3

　　我们先打开demo看一下。
　　这个日历效果很好，外形也十分美观。
　　4

　　打开demo的代码，小编就以demo为例，来介绍一下这款日期控件的用法。
　　首先，我们可以看到，这里有一个input。
　　然后js中通过id“#reservation”来定位这个input，使它成为一个日期控件。
　　激活日期控件的方法很简单（无参数法）
　　$('#reservation').daterangepicker();
　　这样就可以建立一个最简单日期选择器了。
　　5

　　加参数的日历可以通过自己修改初始化参数来选择自己要用的日期选择器。
　　bootstrap的这款控件还是相当强大的，几乎可以满足你的一切要求。
　　在参数的设置下，你可以得到各种各样的日期选择格式
　　6
　　具体的参数列表在bootstrap的官网上可以找到，介绍还算清楚。
　　但一般用不到那么多，需要改的一般就是format、weekStart、startView等。

Answer 2

方法/步骤
1
首先，我们将这款日期控件下载下来。百度bootstrap-daterangepicker即可。

2
下载下来解压的文件如图。
主要文件有
daterangepicker.js
moment.js
bootstrap.min.css
daterangepicker-bs3.css
即两个js文件，两个css文件。

3
我们先打开demo看一下。
这个日历效果很好，外形也十分美观。

4
打开demo的代码，小编就以demo为例，来介绍一下这款日期控件的用法。
首先，我们可以看到，这里有一个input。
然后js中通过id“#reservation”来定位这个input，使它成为一个日期控件。
激活日期控件的方法很简单（无参数法）
$('#reservation').daterangepicker();
这样就可以建立一个最简单日期选择器了。
效果如图。

5
加参数的日历可以通过自己修改初始化参数来选择自己要用的日期选择器。
bootstrap的这款控件还是相当强大的，几乎可以满足你的一切要求。
在参数的设置下，你可以得到各种各样的日期选择格式，如图。

6
具体的参数列表在bootstrap的官网上可以找到，介绍还算清楚。地址如图。
但一般用不到那么多，需要改的一般就是format、weekStart、startView等。

END
方法/步骤2
但参数不一定可以满足我们的需求，有时候我们还需要其他的东西，比如说想要一个中文的日期选择器。
那么这就需要我们自己手动改一下代码了。
打开daterangepicker.js文件。
这里面就是日期选择器的源码。
这里面只是对参数分析和日期选择器基础模板的代码，但是具体的显示的东西在另一个文件里。

其实这个日期选择器的生成机制很简单。
就是js中写好了基本框架的html代码，然后根据初始化参数添加上对应的html代码，再用jquery的append等类似的函数输出这个日期选择器到指定位置。
所以，我们可以在js中找到模板的html代码，并根据自己的需要加以更改。
比如我想要一个中文的日期选择器。
打开moment.js文件，这里面有一些数组，储存的显示的东西，比如星期，12个月份的显示，当然，都是英文的。
看到这一行代码了吗：_months : "January_February_March_April_May_June_July_August_September_October_November_December".split("_")
这是月份，我们把它改成中文。
当然，还有其他的地方，我们都可以根据自己的需要进行更改。
注意：记得更改引用文件。