其中的架包和代码,具体可以去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的更多相关文章

  1. 时间插件-daterangepicker

    一款基于bootstrap的时间插件daterangepicker,顾名思义,主要用于时间区间选择,也可做单个时间选择 demo.1汉化版的一个时间选择案例 <!DOCTYPE html> ...

  2. 时间插件--daterangepicker使用和配置详解

    1.序言: daterangepicker是Bootstrap的一个时间组件,使用很方便 用于选择日期范围的JavaScript组件. 设计用于Bootstrap CSS框架. 它最初是为了改善报表而 ...

  3. bootstrap下的双选时间插件使用方法

    bootstrap画的页面很漂亮,能自动适应网页端,移动端.实现一个双选时间控件: 要得jar包自己去下 一.页面 二.JS var $createTime=$('#createTime');$cre ...

  4. 基于bootstrap的时间选择插件daterangepicker以及汉化方法

    双日历时间段选择插件 — daterangepicker是bootstrap框架后期的一个时间控件: 可以设定多个时间段选项:也可以自定义时间段:由用户自己选择起始时间和终止时间:时间段的最大跨度可以 ...

  5. 基于bootstrap的双日历插件 daterangepicker

    我遇到需求是要求我将daterangepicker的一个双日期选择格式修改成两个单日期格式的日期选择框(方便手机端显示),要求如下: 1.两个单日期格式分别为开始日期和结束日期 2.开始日期可选择范围 ...

  6. js插件---bootstrap插件daterangepicker是什么

    js插件---bootstrap插件daterangepicker是什么 一.总结 一句话总结:日期段选择插件,也可选择日期 日期段选择插件,也可选择日期 1.daterangepicker 控件如何 ...

  7. angularjs封装bootstrap官网的时间插件datetimepicker

    背景:angular与jquery类库的协作 第三方类库中,不得不提的是大名鼎鼎的jquery,现在基本上已经是国内web开发的必修工具了.它灵活的dom操作,让很多web开发人员欲罢不能.再加上已经 ...

  8. bootstrap时间插件 火狐不显示 完美解决方法

    原文链接:http://www.phpbiji.cn/article/index/id/141/cid/4.html bootstrap时间插件火狐 bootstrap-datetimepicker火 ...

  9. 【Bootstrap】bootstrap-datetimepicker日期时间插件

    [bootstrap-datetimepicker] datetimepicker是一个比较方便的日期时间插件.有了这个之后,我们可以在类似于表单的地方提供一个友好的日期(时间)输入功能.官方文档:[ ...

随机推荐

  1. PHP GD库---之微信朋友圈9张图

    $item_pic = "img/item.jpg"; list($width, $height) = getimagesize($item_pic); $item_pic = i ...

  2. MAC OS X 终端命令入门

    在这里记下..防止丢失 pwd 当前工作目录 cd(不加参数) 进root cd(folder) 进入文件夹 cd .. 上级目录 cd ~ 返回root cd - 返回上一个访问的目录 rm 文件名 ...

  3. Leetcode1--->数组中两数之和等于给定数

    题目: 给定一个数组nums,目标数target.在数组中找到两数之和为target的数,返回两数的下标举例: Given nums = [2, 7, 11, 15], target = 9, Bec ...

  4. 缓存淘汰算法之FIFO

    前段时间去网易面试,被这个问题卡住,先做总结如下: 常用缓存淘汰算法 FIFO类:First In First Out,先进先出.判断被存储的时间,离目前最远的数据优先被淘汰. LRU类:Least ...

  5. matlab 画图进阶

    matlab 画图进阶 applications of matlab in engineering 图表类型的选择 first:advanced 2d plots special plots logl ...

  6. 算法理论——PLA

    全称 perceptron learning algrithm 用武之地 二值分类问题,资料线性可分 算法核心(以二维平面为例) 找到一条直线WTX=0,一边全为+1,另一边全为-1.找到了这条线(即 ...

  7. JDBC 学习笔记(八)—— ResultSet

    JDBC 使用 ResultSet 来封装 SQL 的查询结果,可以将 ResultSet 类比为数据库表的查询结果. 它拥有如下两个性质: 可滚动. 可更新. 这两个性质,是在创建 Statemen ...

  8. 【Luogu】P2886牛继电器(矩阵加速floyd)

    题目链接 矩阵加速floyd……牛逼牛逼. 注意离散化,注意更新的时候要用旧的权值矩阵更新. #include<cstdio> #include<cstring> #inclu ...

  9. POJ——1195Mobile phones(二维树状数组点修改矩阵查询)

    Mobile phones Time Limit: 5000MS   Memory Limit: 65536K Total Submissions: 17764   Accepted: 8213 De ...

  10. [luoguP3355] 骑士共存问题(二分图最大独立集)

    传送门 模型 二分图最大独立集,转化为二分图最大匹配,从而用最大流解决. 实现 首先把棋盘黑白染色,使相邻格子颜色不同. 把所有可用的黑色格子看做二分图X集合中顶点,可用的白色格子看做Y集合顶点. 建 ...