这段时间看了下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. LeetCode 164. Maximum Gap[翻译]

    164. Maximum Gap 164. 最大间隔 Given an unsorted array, find the maximum difference between the successi ...

  2. .net core编写转发服务(三) 接入Polly

    在web服务里面,很常见出现各种问题,需要一些响应的策略,比如服务繁忙的时候,重试,或者重试等待 服务繁忙的时候根据策略即使处理 关于接入Polly我还是沿用之前的代码,继续迭代 Web Api用的是 ...

  3. 银弹谷V百科|使用技巧：Vbase技巧二则之一

    银弹谷零代码开发V平台提供访问窗体的短地址链接 格式:http://IP:port/form/componentCode/windowCode  例子: 默认地址:http://IP:port/mod ...

  4. Dropzone.js文件拖拽上传提示Dropzone already attached 解决

    最近收到客户的反馈,在操作上传文件有时会出现没有任何.大部分时间是正常. 重现问题后,f12打开后台控制台发现如下提示: Uncaught Error: Dropzone already attach ...

  5. 深度学习论文翻译解析（十二）：Fast R-CNN

    论文标题:Fast R-CNN 论文作者:Ross Girshick 论文地址:https://www.cv-foundation.org/openaccess/content_iccv_2015/p ...

  6. 23、Interpreter 解释器模式

    1.Interpreter 解释器模式 解释器模式是一种使用频率相对较低但学习难度较大的设计模式,它用于描述如何使用面向对象语言构成一个简单的语言解释器.在某些情况下,为了更好地描述某一些特定类型的问 ...

  7. 安装Scrapy过程中遇到的几个问题总结

    安装Scrapy 1.https://www.lfd.uci.edu/~gohlke/pythonlibs/下载 Twisted 安装 Twisted-19.10.0-cp37-cp37m-win_a ...

  8. 2020-08-08：有一批气象观测站，现需要获取这些站点的观测数据，并存储到 Hive 中。但是气象局只提供了 api 查询，每次只能查询单个观测点。那么如果能够方便快速地获取到所有的观测点的数据？

    福哥答案2020-08-08: 参考答案:A.通过shell 或python 等调用api,结果先暂存本地,最后将本地文件上传到 Hive 中.B.通过 datax 的 httpReader 和 hd ...

  9. 2020-04-28：工作中如何解决MQ消息堆积和消息重复的问题？

    福哥答案2020-04-28:此答案来自群员,感谢群员支持. 消息堆积 只能考虑 增多消费者 以及后端其他服务 组件的吞吐能力 别的有办法吗 如果更彻底一点 分撒单个队列里的消息 队列 更分门别类 或 ...

  10. K8s集群verification error" while trying to verify candidate authority certificate "kubernetes"

    问题内容 because of "crypto/rsa: verification error" while trying to verify candidate authorit ...