这段时间看了下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. grid网格布局使用

    定义 grid布局是指对网页进行划分成一个一个网格,然后根据自己的要求,可以任意组合. 以前写类似的功能,很麻烦,需要写很多的CSS去控制,有了grid就很方便了,可以随意进行组合. 跟flex有很多 ...

  2. Linux发行版-Manjaro

    Manjaro是什么? 一个基于Arch系列,开源的linux发行版 Mnajrao官网了解更多,这里不做更多阐述内容 为什么使用Manjaro 第一点,为了方便自己隔离腾讯网游 第二点,更方便的学习 ...

  3. HTML学习笔记（一）——基础标签及常用编辑器技巧

    HTML 初识html 什么是html? html是超文本标记语言(hyper text markup language) html5的基本结构 <!DOCTYPE html> <! ...

  4. SqlServer 查询的几种方式以及数字函数、时间函数的应用总结（回归基础）

    --语法:select * from 表名 *表示查询所有字段数据 select * from Class select * from Student select * from RankingLis ...

  5. “随手记”开发记录day07

    今天完成了关于我们页面中的相关信息,由于之前没有做过这个东西,只想着用一个view解决 可是发现我们整的太简单了,还是太年轻,最后想出来要跟java代码一起解决这个问题, 效果

  6. MATLAB通过ODBC连接数据库方法

    MATLAB通过ODBC连接数据库方法 1.首先创建数据库,我在这里用到的是MySQL 8.0 2.建立ODBC数据源,参考链接: https://www.cnblogs.com/benpao1314 ...

  7. Django-model查询[为空、由某字符串开头、由某字符串结尾、包含某字符串]，__isnull、__starswith、__endswith、__contains

    使用属性+__isnull就可以判断此字段为空 a = DatasClass.objects.filter(name__isnull=True) 使用属性+__startswith可以判断属性由某字符 ...

  8. three.js 制作机房（上）

    three.js使用的人太少了,一个博文就几百个人看,之前发js基础哪怕是d3都会有几千的阅读量,看看以后考虑说一说d3了,哈哈.吐槽完毕回归正题.前几天郭先生看到网上有人开发了3D机房,正愁博客没什 ...

  9. LeetCode746 Min Cost Climbing Stairs（爬上楼梯的最小损失）

    题目 On a staircase, the i-th step has some non-negative cost cost[i] assigned (0 indexed). Once you p ...

  10. 几个递进的make file

    春节在家写的几个递进的make file,部分有点问题.接下来 有空我要把GNU make的手册看完.不然这方面太菜了. GNU make手册 都需要make先设置环境变量BUILD_MODE为run ...