这段时间看了下bootstrap的时间控件，发现使用起来还是很简单的，趁着有时间的时候整理了一下，方便自己以后忘记的时候查阅。。。

废话不多说先上效果图

　　　　　　

　　　　　　 　　　　　

接下来是代码实现

第一步当然是导入css、js之类的文件啦

<link href="assets/css/icons.css" rel="stylesheet" />         后面那个时期样式图片样式

<link href="assets/css/bootstrap.css" rel="stylesheet" />

<link href="assets/css/plugins.css" rel="stylesheet" />        日期控件样式

<script src="assets/js/jquery-1.8.3.min.js"></script>

<script src="assets/js/bootstrap/bootstrap.js"></script>        

<script src="assets/plugins/core/moment/moment.min.js"></script>        moment是一个JavaScript日期处理类库

<script src="assets/plugins/forms/daterangepicker/daterangepicker.js"></script>        时间范围控件

<script src="assets/plugins/forms/datetimepicker/bootstrap-datetimepicker.min.js"></script>

<script src="assets/plugins/forms/datetimepicker/bootstrap-datetimepicker.zh-CN.js"></script>这个没有用到可忽视

第二部是html文件

<body>

    <div class="col-lg-3 col-md-3"><!-- 这个控制input的宽高   -->

        <div class="input-group"><!--这个控制后面图片与input在一起的  -->

            <input id="adddate" class="form-control" placeholder="申请日期范围" />

<span class="input-group-addon"><i class="fa-calendar"></i></span>

        </div>

            <input onclick="a()" type="button" value="提交"/>   <!--  自己用来测试input中的内容   -->

        </div>

</body>

第三部是js文件内容编写

<script>

    $(document).ready(

            function() {

                $('#adddate').daterangepicker({

                        // startDate: moment().startOf('day'),

                        //endDate: moment(),

                        minDate: '2012-01-01',    //最小时间  =====>>格式要跟格式化的样式一致

                        endDate : moment(), //最大时间

                        dateLimit : {days : 30}, //起止时间的最大间隔

                        showDropdowns : true,

                        showWeekNumbers : false, //是否显示第几周

                        timePicker : false, //是否显示小时和分钟

                        timePickerIncrement : 60, //时间的增量，单位为分钟

                        timePicker12Hour : false, //是否使用12小时制来显示时间

                        ranges : {

                            '最近1小时': [moment().subtract('hours',1), moment()],  //moment.js需要详细了解的可以点我一下

                            '今天' : [ moment().startOf('day'), moment() ],

                            '昨天' : [

                            moment().subtract('days', 1).startOf('day'),

                            moment().subtract('days', 1).endOf('day') ],

                                '最近7日' : [ moment().subtract('days', 6),

                                        moment() ],

                                '最近30日' : [ moment().subtract('days', 29),

                                        moment() ]

                            },

                            opens : 'right', //日期选择框的弹出位置

                            buttonClasses : [ 'btn btn-default' ],

                            applyClass : 'btn-small btn-primary blue',

                            cancelClass : 'btn-small',

                            format : 'YYYY-MM-DD', //控件中from和to 显示的日期格式

                            separator : ' 到 ',

                            locale : {

                                applyLabel : '确定',

                                cancelLabel : '取消',

                                fromLabel : '起始时间',

                                toLabel : '结束时间',

                                customRangeLabel : '自定义时间',

                                daysOfWeek : [ '日', '一', '二', '三', '四', '五','六' ],

                                monthNames : [ '一月', '二月', '三月', '四月', '五月',

                                        '六月', '七月', '八月', '九月', '十月', '十一月',

                                        '十二月' ],

                                firstDay : 1

                            }

                        },

                        function(start, end, label) {//格式化日期显示框

                            $('#adddate span').html(

                                    start.format('MM-DD-YYYY') + ' - '

                                            + end.format('YYYY-MM-DD'));

                        });

        /*         $("#startdate").datetimepicker({

                    language : 'zh-CN',

                    format : "yyyy-mm-dd",

                    autoclose : true,

                    todayBtn : true,

                    pickerPosition : "bottom-left",

                    minView : 2            //最精准的时间选择为日期0-分 1-时 2-日 3-月

                });

                $("#enddate").datetimepicker({

                    language : 'zh-CN',

                    format : "yyyy-mm-dd",

                    autoclose : true,

                    todayBtn : true,

                    pickerPosition : "bottom-left",

                    minView : 2

                });  */

            });

</script>

一些重要的东西都在代码的注释中说明了，我上传了总结后的文件，需要的小伙伴可以自行下载

链接：https://pan.baidu.com/s/1edNib0 密码：wqij

bootstrap的时间控件使用(双日历)的更多相关文章

  1. bootstrap添加时间控件

    $('#startTime').daterangepicker({ singleDatePicker: true,format:"YYYY-MM-DD HH:mm:ss",time ...

  2. Bootstrap中时间（时间控件）的设计

    运用bootstrap的时间控件,生成时间选择器. 1.截图:有以下这些样式 10年视图        年视图         月视图         日视图         小时视图 2.视图设计: ...

  3. BootStrap母版页布局.子页面布局.BootstrapTable.模态框.警告框.html导出tabl生成Excel.HTML生成柱图.饼图.时间控件中文版

    如上就是很多后台管理系统的母版页布局. 左边一列模板.上面一列系统标识. 空白处充填子页面 以ASP.NET MVC为基础 引入bootstrap.js.bootstrap.css body: < ...

  4. bootstrap 时间控件

    近期使用了bootstrap的UI感觉确实非常美丽,非常值得学习和使用. 以下先简单了解下bootstrap的时间控件. 这个时间控件使用起来还是很的简单.仅仅须要引入主要的css和js就能够了 须要 ...

  5. Bootstrap 时间控件datetimepicker与timepicker

    一.datetimepicker 首先,我们看看点击选择时间的时候的展示页面吧 年                                                月           ...

  6. angularjs 整合bootstrap 时间控件

    一.引入js <link href="${basePath}/static/plugin/bootstrap/css/bootstrap-datetimepicker.min.css& ...

  7. bootstrap-datetimepicker时间控件

    欢迎各种吐槽. 本人小前端,学习过程中,某日遇到做时间控件的需求,于是无休止的召唤了度娘,发现看不太懂.算是为自己做个笔记,也便于菜鸟级别的看的懂. 首先,我们看看点击选择时间的时候的展示页面吧 年  ...

  8. BootStrap dateRangePicker时间范围控件

    BootStrap dateRangePicker时间范围控件 1 安装引用 1.1 下载zip Github:https://github.com/dangrossman/bootstrap-dat ...

  9. VB6.0中，DTPicker日期、时间控件不允许为空时，采用文本框与日期、时间控件相互替换赋值（解决方案）

    VB6.0中,日期.时间控件不允许为空时,采用文本框与日期.时间控件相互替换赋值,或许是一个不错的选择. 实现效果如下图: 文本框txtStopTime1 时间框DTStopTime1(DTPicke ...

随机推荐

  1. 一个简单的CPP处理框架

    好久没有在csdn上写过东西了,这么多年,一方面是工作忙,下班到家也没有开过电脑了,要陪小孩玩: 下面分享一段代码,是用CPP做的一个简单的消息(协议)处理框架: 是通过成员函数指针+map来实现的: ...

  2. Jenkins持续集成（上）-Windows下安装Jenkins

    环境:Windows 2008 R2.Jenkins2.235.1: 概要 前面写过一篇文章,<自动发布-asp.net自动发布.IIS站点自动发布(集成SLB.配置管理.Jenkins)> ...

  3. redis（一）内部机制的介绍和启动过程

    redis(一)内部机制的介绍和启动过程 redis的基本介绍 redis服务端 redis客户端 redis的持久化 redis中的文件事件和时间时间 redis的启动过程 redis的基本介绍 r ...

  4. 微软看上的Rust 语言，安全性真的很可靠吗

    摘要:近几年,Rust语言以极快的增长速度获得了大量关注.其特点是在保证高安全性的同时,获得不输C/C++的性能.在Rust被很多项目使用以后,其实际安全性表现到底如何呢? 近几年,Rust语言以极快 ...

  5. LDA线性判别分析原理及python应用（葡萄酒案例分析）

    目录 线性判别分析(LDA)数据降维及案例实战 一.LDA是什么 二.计算散布矩阵 三.线性判别式及特征选择 四.样本数据降维投影 五.完整代码 结语 一.LDA是什么 LDA概念及与PCA区别 LD ...

  6. jraft日志复制

    jraft的日志复制是指从leader往follower复制logEntry的过程. 日志复制从节点成为leader开始.在nodeImpl的becomeLeader中 private void be ...

  7. 喵的Unity游戏开发之路 - 推球：游戏中的物理

    很多童鞋没有系统的Unity3D游戏开发基础,也不知道从何开始学.为此我们精选了一套国外优秀的Unity3D游戏开发教程,翻译整理后放送给大家,教您从零开始一步一步掌握Unity3D游戏开发. 本文不 ...

  8. 【Spring注解驱动开发】自定义组件如何注入Spring底层的组件？看了这篇我才真正理解了原理！！

    写在前面 最近,很多小伙伴出去面试都被问到了Spring问题,关于Spring,细节点很多,面试官也非常喜欢问一些很细节的技术点.所以,在 Spring 专题中,我们尽量把Spring的每个技术细节说 ...

  9. PythonCrashCourse 第六章习题

    使用一个字典来存储一个熟人的信息,包括名.姓.年龄和居住的城市.该字典应包含键first_name .last_name .age 和city .将存储在该字典中 的每项信息都打印出来 person ...

  10. 送大家几个cnblogs号，供快捷评论，请谨慎使用

    欢迎评论& 3461896724@qq.com互动 可以在我的首页看更多 #1先送大家几个号:(密码都是 MLdlight2020)请区分大小写(可以直接复制) 写过一篇 免费验证码接收网站& ...