BootStrap的双日历时间控件使用


Posted in Javascript onJuly 25, 2017

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

废话不多说先上效果图

BootStrap的双日历时间控件使用

 BootStrap的双日历时间控件使用

 BootStrap的双日历时间控件使用

接下来是代码实现

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

<link href="assets/css/icons.css" rel="external nofollow" rel="stylesheet" />     后面那个时期样式图片样式
<link href="assets/css/bootstrap.css" rel="external nofollow" rel="stylesheet" />    
<link href="assets/css/plugins.css" rel="external nofollow" 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>

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

链接:链接: http://pan.baidu.com/s/1eSeS8L0 密码: jcsp

总结

以上所述是小编给大家介绍的BootStrap的双日历时间控件使用,希望对大家有所帮助,如果大家有任何疑问请给我留

言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js 实现css风格选择器(压缩后2KB)
Jan 12 Javascript
IE中JS跳转丢失referrer问题的2个解决方法
Jul 18 Javascript
jquery获取radio值(单选组radio)
Oct 16 Javascript
为什么Node.js会这么火呢?Node.js流行的原因
Dec 01 Javascript
javascript实现鼠标拖动改变层大小的方法
Apr 30 Javascript
jQuery实现的图文高亮滚动切换特效实例
Aug 10 Javascript
JavaScript DOM 对象深入了解
Jul 20 Javascript
AngularJS入门教程之更多模板详解
Aug 19 Javascript
AngularJS实践之使用ng-repeat中$index的注意点
Dec 22 Javascript
新手快速上手webpack4打包工具的使用详解
Jan 28 Javascript
详解写好JS条件语句的5条守则
Feb 28 Javascript
vue cli使用融云实现聊天功能的实例代码
Apr 19 Javascript
vue事件修饰符和按键修饰符用法总结
Jul 25 #Javascript
Vue.js学习笔记之修饰符详解
Jul 25 #Javascript
ES6正则表达式扩展笔记
Jul 25 #Javascript
简单实现js拖拽效果
Jul 25 #Javascript
Vue实现一个返回顶部backToTop组件
Jul 25 #Javascript
基于jquery实现多级菜单效果
Jul 25 #jQuery
关于TypeScript中import JSON的正确姿势详解
Jul 25 #Javascript
You might like
dhtmlxTree目录树增加右键菜单以及拖拽排序的实现方法
2013/04/26 PHP
基于PHP文件操作的详细诠释
2013/06/21 PHP
thinkphp3查询mssql数据库乱码解决方法分享
2014/02/11 PHP
PHP实现更新中间关联表数据的两种方法
2014/09/01 PHP
6个超实用的PHP代码片段
2015/08/10 PHP
详解PHP防止盗链防止迅雷下载的方法
2017/04/26 PHP
PHP封装的简单连接MongoDB类示例
2019/02/13 PHP
javascript 函数调用的对象和方法
2010/07/01 Javascript
基于Jquery的文字自动截取(提供源代码)
2011/08/09 Javascript
盘点javascript 正则表达式中 中括号的【坑】
2016/03/16 Javascript
jQuery获取父元素节点、子元素节点及兄弟元素节点的方法
2016/04/14 Javascript
通过jquery实现页面的动画效果(实例代码)
2016/09/18 Javascript
详解Angular-cli生成组件修改css成less或sass的实例
2017/07/27 Javascript
vue实现浏览器全屏展示功能
2019/11/27 Javascript
javascript实现贪吃蛇小游戏
2020/07/28 Javascript
[02:34]2016完美“圣”典风云人物:BurNIng专访
2016/12/10 DOTA
python中文编码问题小结
2014/09/28 Python
浅析Python多线程下的变量问题
2015/04/28 Python
一个基于flask的web应用诞生 用户注册功能开发(5)
2017/04/11 Python
详解 Python 读写XML文件的实例
2017/08/02 Python
Python实现利用163邮箱远程关电脑脚本
2018/02/22 Python
Python批量提取PDF文件中文本的脚本
2018/03/14 Python
Python PyAutoGUI模块控制鼠标和键盘实现自动化任务详解
2018/09/04 Python
解决Python中定时任务线程无法自动退出的问题
2019/02/18 Python
Python Django 页面上展示固定的页码数实现代码
2019/08/21 Python
python中p-value的实现方式
2019/12/16 Python
python在不同条件下的输入与输出
2020/02/13 Python
python实现自动打卡的示例代码
2020/10/10 Python
Lands’ End英国官方网站:高质量男女服装
2017/10/07 全球购物
高性能钓鱼服装:Huk Gear
2019/02/20 全球购物
采购员岗位职责
2015/02/03 职场文书
实施意见格式范本
2015/06/05 职场文书
2015年计算机教师工作总结
2015/07/22 职场文书
读《推着妈妈去旅行》有感1500字
2019/10/15 职场文书
jdbc使用PreparedStatement批量插入数据的方法
2021/04/27 MySQL
golang生成并解析JSON
2022/04/14 Golang