【bootstrap】使用支持bootstrap的时间插件daterangepicker
其中的架包和代码,具体可以去GitHub下查看:
https://github.com/AngelSXD/myagenorderdiscount
1.引入js和css
<link href="static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="static/css/index/daterangepicker.css" />
<link rel="stylesheet" href="static/css/index/custom.css">
<script src="static/bootstrap/js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="static/bootstrap/js/bootstrap.min.js"></script>
<script src="static/js/index/custom.js"></script>
<script src="static/js/index/daterangepicker.js"></script>
2.页面上有一个input框
<input type="text" class="form-control search-menu dateInput">
3.js中赋予这个input时间插件即可
//时间搜索框--赋予时间插件
$(".dateInput").daterangepicker({
"showDropdowns": true,
"showWeekNumbers": true,
"showISOWeekNumbers": true,
"autoApply": true }, function(start, end, label) {
console.log("选定时间段: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')");
});
效果如下:

【bootstrap】使用支持bootstrap的时间插件daterangepicker的更多相关文章
- 时间插件-daterangepicker
一款基于bootstrap的时间插件daterangepicker,顾名思义,主要用于时间区间选择,也可做单个时间选择 demo.1汉化版的一个时间选择案例 <!DOCTYPE html> ...
- 时间插件--daterangepicker使用和配置详解
1.序言: daterangepicker是Bootstrap的一个时间组件,使用很方便 用于选择日期范围的JavaScript组件. 设计用于Bootstrap CSS框架. 它最初是为了改善报表而 ...
- bootstrap下的双选时间插件使用方法
bootstrap画的页面很漂亮,能自动适应网页端,移动端.实现一个双选时间控件: 要得jar包自己去下 一.页面 二.JS var $createTime=$('#createTime');$cre ...
- 基于bootstrap的时间选择插件daterangepicker以及汉化方法
双日历时间段选择插件 — daterangepicker是bootstrap框架后期的一个时间控件: 可以设定多个时间段选项:也可以自定义时间段:由用户自己选择起始时间和终止时间:时间段的最大跨度可以 ...
- 基于bootstrap的双日历插件 daterangepicker
我遇到需求是要求我将daterangepicker的一个双日期选择格式修改成两个单日期格式的日期选择框(方便手机端显示),要求如下: 1.两个单日期格式分别为开始日期和结束日期 2.开始日期可选择范围 ...
- js插件---bootstrap插件daterangepicker是什么
js插件---bootstrap插件daterangepicker是什么 一.总结 一句话总结:日期段选择插件,也可选择日期 日期段选择插件,也可选择日期 1.daterangepicker 控件如何 ...
- angularjs封装bootstrap官网的时间插件datetimepicker
背景:angular与jquery类库的协作 第三方类库中,不得不提的是大名鼎鼎的jquery,现在基本上已经是国内web开发的必修工具了.它灵活的dom操作,让很多web开发人员欲罢不能.再加上已经 ...
- bootstrap时间插件 火狐不显示 完美解决方法
原文链接:http://www.phpbiji.cn/article/index/id/141/cid/4.html bootstrap时间插件火狐 bootstrap-datetimepicker火 ...
- 【Bootstrap】bootstrap-datetimepicker日期时间插件
[bootstrap-datetimepicker] datetimepicker是一个比较方便的日期时间插件.有了这个之后,我们可以在类似于表单的地方提供一个友好的日期(时间)输入功能.官方文档:[ ...
随机推荐
- Python并发(二)
并发是指一次处理多件事,而并行是指一次做多件事.二者不同,但互相有联系.打个比方:像Python的多线程,就是并发,因为Python的解释器GIL是线程不安全的,一次只允许执行一个线程的Python字 ...
- 令人惊叹的Npm工具包
1.http-server (简单搭建http服务器) 2.json-server (JSON服务器,快速搭建resful api接口) 3.cssnano (css多功能优化工具) PS:比uncs ...
- linux随笔三
1.ps 结果输出: PID TTY TIME CMD pts/ :: bash pts/ :: ps显示了程序的进程ID,其运行的终端和进程使用的cpu时间
- CSS3中的border-radius兼容IE低版本解决方法
ie-css3.htc先说道说道这斯是弄啥嘞ie-css3.htc是一个可以让IE浏览器支持部份CSS3属性的htc文件,不只是box-shadow,它还可以让你的IE浏览器支持圆角属性border- ...
- CSS编码规范(转)
1 前言 CSS作为网页样式的描述语言,在百度一直有着广泛的应用.本文档的目标是使CSS代码风格保持一致,容易被理解和被维护. 虽然本文档是针对CSS设计的,但是在使用各种CSS的预编译器(如less ...
- HDU——1020Encoding(水题,string过)
Encoding Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total S ...
- BZOJ 4868 [Shoi2017]期末考试 ——三分 枚举
考场上xjb三分过掉了. 然后$sdfzyhx$.$silvernebula$ $O(n)$虐掉了. 我还是太菜了 #include <cstdio> #include <cmath ...
- [luoguP2765] 魔术球问题(最大流—最小不相交路径覆盖)
传送门 枚举球的个数 num 如果 i < j && (i + j) 是完全平方数,那么 i -> j' 连一条边 再加一个超级源点 s,s -> i 再加一个超级汇 ...
- K3Cloud调用存储过程
SQLScriptServiceHelper.GetDataFromStoredProc( this.Context, DatabaseType.Oracle, "/*dialect*/TJ ...
- JS和CS互访【后台前台代码调用JavaScript变量以及JavaScript调用代码变量】
原文发布时间为:2008-10-13 -- 来源于本人的百度文章 [由搬家工具导入] .如何在JavaScript访问C#函数? 2.如何在JavaScript访问C#变量? 3.如何在C#中访问Ja ...