【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 + ')");
    });

 

 

效果如下:

 

时间: 2024-08-01 01:43:01

【bootstrap】使用支持bootstrap的时间插件daterangepicker的相关文章

angularjs封装bootstrap时间插件datetimepicker_AngularJS

背景:angular与jquery类库的协作 第三方类库中,不得不提的是大名鼎鼎的jquery,现在基本上已经是国内web开发的必修工具了.它灵活的dom操作,让很多web开发人员欲罢不能.再加上已经很成熟的jquery UI 库和大量jquery 插件,几乎是一个取之不尽用之不竭的宝库.然而,它是否能与angularjs结合呢? 很多angularjs原教旨主义者对此持否定态度.他们认为,既然已经使用了angularjs做web应用框架,那就必须避免其他类库的干扰,做纯净的MvvM模式应用.任

Bootstrap中的表单验证插件bootstrapValidator使用方法整理(推荐)_javascript技巧

本文给大家介绍如何判断表单验证的实例代码,在没给大家介绍正文之前,先给大家介绍下插件. 插件介绍 先上一个图: 下载地址:https://github.com/nghuuphuoc/bootstrapvalidator 使用提示 中文化: 下载插件后,将\js\bootstrapValidator\language\zh_CN.js 引入文件,即实现中文化 提交前验证表单: 更丰富一点的表单验证例子:http://www.jq22.com/yanshi522,直接上代码: <!DOCTYPE h

基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解_javascript技巧

Bootstrap文件上传插件File Input是一个不错的文件上传控件,但是搜索使用到的案例不多,使用的时候,也是一步一个脚印一样摸着石头过河,这个控件在界面呈现上,叫我之前使用过的Uploadify 好看一些,功能也强大些,本文主要基于我自己的框架代码案例,介绍其中文件上传插件File Input的使用. 1.文件上传插件File Input介绍 这个插件主页地址是:http://plugins.krajee.com/file-input,可以从这里看到很多Demo的代码展示:http:/

全系IE支持Bootstrap的解决方法_javascript技巧

最近做一个Web网站,之前一直觉得bootstrap非常好,这次使用了bootstrap3,在chrome,firefox,safari,opera,360浏览器(极速模式).搜狗浏览器等浏览器下均没有问题,而在IE8及IE11下发现样式无法显示,然后各种百度啊,最后在一个网友帖子的帮助下解决了问题,先将解决方法总结如下: 首先需要确保你的HTML页面开始部分要有DOCTYPE声明.DOCTYPE告诉浏览器使用什么样的HTML或XHTML规范来解析HTML文档,具体会影响: 对标记attribu

Bootstrap每天必学之js插件_javascript技巧

1.Bootstrap 插件概览 在前面 布局组件 章节中所讨论到的组件仅仅是个开始.Bootstrap 自带 12 种 jQuery 插件,扩展了功能,可以给站点添加更多的互动.即使您不是一名高级的 JavaScript 开发人员,您也可以着手学习 Bootstrap 的 JavaScript 插件.利用 Bootstrap 数据 API(Bootstrap Data API),大部分的插件可以在不编写任何代码的情况被触发. 2.导入JavaScript插件 Bootstrap除了包含丰富的W

Bootstrap 附加导航(Affix)插件实例详解_javascript技巧

附加导航(Affix)插件允许某个 <div> 固定在页面的某个位置.您也可以在打开或关闭使用该插件之间进行切换.一个常见的例子是社交图标.它们将在某个位置开始,但当页面点击某个标记,该 <div> 会锁定在某个位置,不会随着页面其他部分一起滚动. 如果您想要单独引用该插件的功能,那么您需要引用 affix.js.或者,正如 Bootstrap 插件概览 一章中所提到,您可以引用bootstrap.js 或压缩版的 bootstrap.min.js. 用法 您可以通过 data 属

Bootstrap所支持的表单控件实例详解_javascript技巧

 Bootstrap所支持的表单控件如下所示: Bootstrap 支持最常见的表单控件,主要是 input.textarea.checkbox.radio 和 select. 输入框(Input) 最常见的表单文本字段是输入框 input.用户可以在其中输入大多数必要的表单数据.Bootstrap 提供了对所有原生的 HTML5 的 input 类型的支持,包括:text.password.datetime.datetime-local.date.month.time.week.number.

JS 替换和时间插件的结合使用方法

这篇文章主要介绍了JS 替换和时间插件的结合使用代码,需要的朋友可以参考下   <script> var d = '2013-07-21'; var nd = d.replace(new RegExp('-', 'g'), ','); //替换全部 document.write(nd); document.write('<br>'); var a = 'phper_yang'; var aa = a.replace('_','.');//替换一次 document.write(aa

链表-试说明如何选用一种合适的表类数据结构来支持O(1)时间的UNION操作?不会破坏集合S1和S2.

问题描述 试说明如何选用一种合适的表类数据结构来支持O(1)时间的UNION操作?不会破坏集合S1和S2. 算法导论一书中,第十章链表那块的课后题:试说明如何选用一种合适的表类数据结构来支持O(1)时间的UNION操作?不会破坏集合S1和S2. 解决方案 很简单,用链表的链表. 解决方案二: 这里要做到O(1)常数,又不能破坏s1 s2,只能再构造一个数据结构将链表包含起来