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 相关文章推荐
Jquery.TreeView结合ASP.Net和数据库生成菜单导航条
Aug 27 Javascript
IE关闭时判断及AJAX注销案例学习
Feb 18 Javascript
JavaScript通过代码调用Flash显示的方法
Feb 02 Javascript
设置jQueryUI DatePicker默认语言为中文
Jun 04 Javascript
js表单登陆验证示例
Oct 19 Javascript
Bootstrap 填充Json数据的实例代码
Jan 11 Javascript
JS基于onclick事件实现单个按钮的编辑与保存功能示例
Feb 13 Javascript
详解vue-cli官方脚手架配置
Jul 20 Javascript
json字符串对象转换代码实例
Sep 28 Javascript
微信js-sdk 录音功能的示例代码
Nov 01 Javascript
vue 微信扫码登录(自定义样式)
Jan 06 Javascript
Vue.Draggable实现交换位置
Apr 07 Vue.js
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
非常精妙的PHP递归调用与静态变量使用
2012/12/16 PHP
php处理文件的小例子(解压缩,删除目录)
2013/02/03 PHP
PHP中$_SERVER使用说明
2015/07/05 PHP
php 实现进制相互转换
2016/04/07 PHP
PHP弱类型的安全问题详细总结
2016/09/25 PHP
PHP7.1方括号数组符号多值复制及指定键值赋值用法分析
2016/09/26 PHP
js函数使用技巧之 setTimeout(function(){},0)
2009/02/09 Javascript
jquery实现漂浮在网页右侧的qq在线客服插件示例
2013/05/13 Javascript
自定义的一个简单时尚js下拉选择框
2013/11/20 Javascript
JavaScript将Web页面内容导出到Word及Excel的方法
2015/02/13 Javascript
js实现div层缓慢收缩与展开的方法
2015/05/11 Javascript
asp知识整理笔记3(问答模式)
2015/09/27 Javascript
jQuery插入节点和移动节点用法示例(insertAfter、insertBefore方法)
2016/09/08 Javascript
浅谈jQuery效果函数
2016/09/16 Javascript
简单的渐变轮播插件
2017/01/12 Javascript
flag和jq on 的绑定多个对象和方法(必看)
2017/02/27 Javascript
Vue.set()实现数据动态响应的方法
2018/02/07 Javascript
微信小程序自定义底部弹出框
2020/11/16 Javascript
详解微信小程序canvas圆角矩形的绘制的方法
2018/08/22 Javascript
vue.extend与vue.component的区别和联系
2018/09/19 Javascript
2020京东618叠蛋糕js脚本(亲测好用)
2020/06/02 Javascript
vue相同路由跳转强制刷新该路由组件操作
2020/08/05 Javascript
Vue使用轮询定时发送请求代码
2020/08/10 Javascript
Python list列表中删除多个重复元素操作示例
2019/02/27 Python
python3 实现口罩抽签的功能
2020/03/11 Python
css3强大的动画效果animate使用说明及浏览器兼容介绍
2013/01/09 HTML / CSS
一款利用html5和css3实现的3D滚动特效的教程
2015/01/04 HTML / CSS
芝加哥牛排公司:Chicago Steak Company
2018/10/31 全球购物
医院实习接收函
2014/01/12 职场文书
优秀社区干部事迹材料
2014/02/03 职场文书
竞选宣传委员演讲稿
2014/05/24 职场文书
实习协议书范本
2014/09/25 职场文书
2014年销售工作总结与计划
2014/12/01 职场文书
财务会计岗位职责
2015/02/03 职场文书
开学第一周总结
2015/07/16 职场文书
2016读书月活动心得体会
2016/01/14 职场文书