多语言展示
当前在线:1069今日阅读:117今日分享:28

如何使用bootstrap的daterangepicker插件

bootstrap为我们提供了一款十分实用的日期控件bootstrap-daterangepicker,但相对于初学者来说,这款日期控件的用法要比按钮等css样式难上许多。这里小编就为大家介绍一下这款功能强大的日期控件的用法。jquery ui的日期选择器和bootstrap的类似,这种东西使用方法甚至参数都差不多。
工具/原料

Bootstrap 最新版本

方法/步骤
3

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

4

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

5

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

6

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

方法/步骤2
1

但参数不一定可以满足我们的需求,有时候我们还需要其他的东西,比如说想要一个中文的日期选择器。那么这就需要我们自己手动改一下代码了。

2

打开daterangepicker.js文件。这里面就是日期选择器的源码。这里面只是对参数分析和日期选择器基础模板的代码,但是具体的显示的东西在另一个文件里。

3

其实这个日期选择器的生成机制很简单。就是js中写好了基本框架的html代码,然后根据初始化参数添加上对应的html代码,再用jquery的append等类似的函数输出这个日期选择器到指定位置。所以,我们可以在js中找到模板的html代码,并根据自己的需要加以更改。

4

比如我想要一个中文的日期选择器。打开moment.js文件,这里面有一些数组,储存的显示的东西,比如星期,12个月份的显示,当然,都是英文的。看到这一行代码了吗:_months : 'January_February_March_April_May_June_July_August_September_October_November_December'.split('_')这是月份,我们把它改成中文。当然,还有其他的地方,我们都可以根据自己的需要进行更改。注意:记得更改引用文件。

注意事项
1

更改源代码之前记得保存一份以防万一,不要问我怎么知道的。

2

更改完之后记得检查引用文件是否对应,浏览器缓存记得清空。

推荐信息