这段时间看了下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. Python格式化字符串(f,F,format,%)

    # 格式化字符串: 在字符串前加上 f 或者 F 使用 {变量名} 的形式来使用变量名的值 year = 2020 event = 'Referendum' value = f'Results of ...

  2. Linux系统中玩到让你停不下来的命令行游戏！

    大家好,我是良许. 在使用 Linux 系统时,命令行不仅可以让我们在工作中提高效率,它还可以在生活上给我们提供各种娱乐活动,因为你可以使用它玩许多非常有意思的游戏,这些游戏可都不需要使用专用显卡. ...

  3. 用 Python 写出这样的进度条，刷新了我对进度条的认知

    ❞ 1 简介 很多人学习python,不知道从何学起.很多人学习python,掌握了基本语法过后,不知道在哪里寻找案例上手.很多已经做案例的人,却不知道如何去学习更加高深的知识.那么针对这三类人,我给 ...

  4. 100例Python代码带你从入门到进阶！

    以下所有代码全都至少运行一遍,确保可复现.易于理解.逐步完成入门到进阶的学习. 此教程经过我 反复打磨多遍 ,经常为此熬夜,真心不易,文章比较长,看完有用,帮我点个在看或分享支持. 教程包括 62 个 ...

  5. GitLab 系列文章

    GitLab 系列文章 记录 GitLab 的相关文章 列表 Docker 搭建 GitLab GitLab CI/CD 配置 GitLab 配置模板 访问 GitLab 数据库 GitLab 转让所 ...

  6. 通过java程序(JSch)运行远程linux主机上的shell脚本

    如果您看完文章之后,觉得对您有帮助,请帮我点个赞,您的支持是我不竭的创作动力! 如果您看完文章之后,觉得对您有帮助,请帮我点个赞,您的支持是我不竭的创作动力! 如果您看完文章之后,觉得对您有帮助,请帮 ...

  7. （数据科学学习手札92）利用query()与eval()优化pandas代码

    本文示例代码已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes 1 简介 利用pandas进行数据分析的过程,不仅仅是计算 ...

  8. Kubeflow实战: 入门介绍与部署实践

    更多内容关注专辑: 机器学习实战 1 介绍 Kubeflow是在k8s平台之上针对机器学习的开发.训练.优化.部署.管理的工具集合,内部集成的方式融合机器学习中的很多领域的开源项目,比如Jupyter ...

  9. SQL Server2017+SSIS+Python

    1.安装SQL Server2017 https://jingyan.baidu.com/article/76a7e409077997fc3a6e1559.html (1)JRE 7报错 只能安装JR ...

  10. C#设计模式之8-组合模式

    组合模式(Composite Pattern) 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/403 访问. 组合模式属 ...