这段时间看了下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. TF上架模式是什么？有什么作用？

    TF上架模式中的TF上架就是TestFlight上架的意思,意思就是将开发者开发完成的App在苹果官方内测商店TestFlight上架的模式,一般被我们简称为TF上架模式. 为什么要了解TF上架呢?为 ...

  2. Qt自定义控件之仪表盘3--雷达扫描图

    1.设计思想 雷达扫描图,在影视作品中见到较多,比如飞机雷达.舰艇雷达,有一个扫描线转圈代表雷达一周旋转或一个批次的收发,发现目标就在表盘上标记位置.和汽车仪表盘类似,汽车仪表盘有底盘背景图.同圆.刻 ...

  3. Hexo小技巧（包括如何插入本地图片）

    我在研究如何在Hexo中引用本地图片时,看到官方文档对此问题已给出了解决方法,并亲测有效.当然,我并不满足于仅仅知道这一个技巧.在大致阅读过官方文档后,我总结了之前我个人并不知道的几个关于Hexo写博 ...

  4. Python | 面试的常客，经典的生产消费者模式

    本文始发于个人公众号:TechFlow,原创不易,求个关注 今天是Python专题的第23篇文章,我们来聊聊关于多线程的一个经典设计模式. 在之前的文章当中我们曾经说道,在多线程并发的场景当中,如果我 ...

  5. 老板让我从上千个Excel中筛选数据，利用Python分分钟解决！

    大家好,又到了Python办公自动化系列. 今天分享一个真实的办公自动化需求,大家一定要仔细阅读需求说明,在理解需求之后即可体会Python的强大! 很多人学习python,不知道从何学起.很多人学习 ...

  6. Python | 常见的反爬及解决方法，值得收藏

    我们都知道Python用来爬数据,为了不让自家的数据被别人随意的爬走,你知道怎么反爬吗?今天播妞带着大家一起见识见识常见的反爬技术. 很多人学习python,不知道从何学起.很多人学习python,掌 ...

  7. SpringBoot常用配置,引入外部配置文件信息,热加载

    SpringBoot的配置文件格式 yml规范 SpringBoot的配置文件支持properties和yml,甚至还支持json. 更推荐使用yml文件格式: yml文件,会根据换行和缩进帮助咱们管 ...

  8. 致敬平凡的程序员--《SOD框架“企业级”应用数据架构实战》自序

    “简单就是美” “平凡即是伟大” 上面两句话不知道是哪位名人说的,又或者是广大劳动人民总结的,反正我很小的时候就常常听到这两句话,这两句话也成了我的人生格言,而且事实上我也是一个生活过得比较简单的平凡 ...

  9. PMP各种图比较记忆

    1.控制图:监控过程是否稳定,是否具有可预测的绩效,在问题还未发生时解决.需要关注控制图中的平均值.控制界限.规格界限的含义.控制上.下限一般设为±3个西格玛.过程失控的情况包括数据点在控制界限外,以 ...

  10. 【Mysql】SpringBoot阿里Druid数据源连接池配置

    一.pom.xml添加 <!-- 配置数据库连接池 --> <dependency> <groupId>com.alibaba</groupId> &l ...