bootstrap日期插件daterangepicker使用详解

今天用的了bootstrap日期插件感觉搜索的资料不是很多在此写下一些使用的心得： 插件开源地址：daterangepicker日期控件， 插件使用只要按照开源中的文档信息来就好先包括以下引用：

包含对jquery，bootstrap框架的引用，以及日期处理用的moment.js,最后加载上这个插件的js和css文件 然后和大部分jq插件一样，该插件也是对$.fn的扩展所以进行以下的操作来使用这个控件

用jq获取到你要插入的那个元素然后运行daterangepicker函数就能使用它默认的样式和属性了， 不过光有这个肯定是不行的，daterangepicker函数可以接受一个参数对象和一个回调函数，如下：

回调函数会在日期更改之后触发有三个参数，开始时间，结束时间以及标签名，可以在这里执行你要进行的操作如ajax请求

以上就可以构建一个英文版的日期控件了

接下来着重介绍一下locale和ranges两个参数

首先是locale这个参数locale是构建本地语言应用的重要参数（github上说locale接受对象参数，不过并没有说明对象的属性）

以下是插件中locale默认属性

我们只有更改这些参数就能够使这个插件变成中文的插件

效果如下：

效果如下：

这样就有了一个中文的日期插件了，当然还有其他的参数可以使用包括添加自己的class用来敷写bootstrap的样式来实现自己想要的样式，也可以使用单选时间框函数来实现，具体的大家可以仔细查看官方的文档来构建自己需要的时间选取控件。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!