Bootstrap时间选择器datetimepicker和daterangepicker使用实例解析


Posted in Javascript onSeptember 17, 2016

在bootstrap中的时间选择器有两种:dateTimePicker和dateRangePicker

1、dateTimePicker好像是官方嫡插件:

需要的文件:

<link rel="stylesheet" href="css/bootstrap-datetimepicker.min.css">
<script src="js/bootstrap-datetimepicker.min.js"></script>
<script src="js/bootstrap-datetimepicker.zh-CN.js"></script>
<script src="js/moment.min.js"></script>

API直接参考:http://www.bootcss.com/p/bootstrap-datetimepicker/

2、dateRangePicker好像是第三方插件,它最终的是可以实现时间段的选择。

需要的文件: 

<link rel="stylesheet" href="css/daterangepicker-bs3.css">
<script src="js/daterangepicker.js"></script>
<script src="js/moment.min.js"></script>

html代码: 

<div class="container-fluid">
 <div class="row-fluid" style="margin-top:5px">
 <div class="span4">
 <div class="control-group">
 <label class="control-label">
  日期:
 </label>
 <div class="controls">
  <div id="reportrange" class="pull-left dateRange" style="width:350px">
  <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
  <span id="searchDateRange"></span>
  <b class="caret"></b>
  </div>
 </div>
 </div>
 </div>
 </div>
</div>

 

js代码:

<script type="text/javascript">
 $(document).ready(function (){
 //时间插件
 $('#reportrange span').html(moment().subtract('hours', 1).format('YYYY-MM-DD HH:mm:ss') + ' - ' + moment().format('YYYY-MM-DD HH:mm:ss'));
 $('#reportrange').daterangepicker(
 {
  // startDate: moment().startOf('day'),
  //endDate: moment(),
  //minDate: '01/01/2012', //最小时间
  maxDate : moment(), //最大时间 
  dateLimit : {
  days : 30
  }, //起止时间的最大间隔
  showDropdowns : true,
  showWeekNumbers : false, //是否显示第几周
  timePicker : true, //是否显示小时和分钟
  timePickerIncrement : 60, //时间的增量,单位为分钟
  timePicker12Hour : false, //是否使用12小时制来显示时间
  ranges : {
  //'最近1小时': [moment().subtract('hours',1), moment()],
  '今日': [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 HH:mm:ss', //控件中from和to 显示的日期格式
  separator : ' to ',
  locale : {
  applyLabel : '确定',
  cancelLabel : '取消',
  fromLabel : '起始时间',
  toLabel : '结束时间',
  customRangeLabel : '自定义',
  daysOfWeek : [ '日', '一', '二', '三', '四', '五', '六' ],
  monthNames : [ '一月', '二月', '三月', '四月', '五月', '六月',
  '七月', '八月', '九月', '十月', '十一月', '十二月' ],
  firstDay : 1
  }
 }, function(start, end, label) {//格式化日期显示框
  $('#reportrange span').html(start.format('YYYY-MM-DD HH:mm:ss') + ' - ' + end.format('YYYY-MM-DD HH:mm:ss'));
 });
 //设置日期菜单被选项 --开始--
 /*
 var dateOption ;
 if("${riqi}"=='day') {
 dateOption = "今日";
 }else if("${riqi}"=='yday') {
 dateOption = "昨日";
 }else if("${riqi}"=='week'){
 dateOption ="最近7日";
 }else if("${riqi}"=='month'){
 dateOption ="最近30日";
 }else if("${riqi}"=='year'){
 dateOption ="最近一年";
 }else{
 dateOption = "自定义";
 }
 $(".daterangepicker").find("li").each(function (){
 if($(this).hasClass("active")){
 $(this).removeClass("active");
 }
 if(dateOption==$(this).html()){
 $(this).addClass("active");
 }
 });*/
 //设置日期菜单被选项 --结束--
 })
</script>

但是这里的月份汉化存在问题,建议需要去moment.min.js文件里面去修改。 

也可以在后期汉化,比较完整的代码: 

var table;
 $(function () {
 table = $('#example').DataTable({
 "ajax": {
 "url":"/example/resources/server_processing_customCUrl.php",
 "data": function ( d ) {
  //添加额外的参数传给服务器
  d.extra_search = $('#reportrange span').html();
 }},
 "processing": true,
 "serverSide": true,
 "language": {
 "sProcessing": "处理中...",
 "sLengthMenu": "显示 _MENU_ 项结果",
 "sZeroRecords": "没有匹配结果",
 "sInfo": "显示第 _START_ 至 _END_ 项结果,共 _TOTAL_ 项",
 "sInfoEmpty": "显示第 0 至 0 项结果,共 0 项",
 "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
 "sInfoPostFix": "",
 "sSearch": "搜索:",
 "sUrl": "",
 "sEmptyTable": "表中数据为空",
 "sLoadingRecords": "载入中...",
 "sInfoThousands": ",",
 "oPaginate": {
  "sFirst": "首页",
  "sPrevious": "上页",
  "sNext": "下页",
  "sLast": "末页"
 },
 "oAria": {
  "sSortAscending": ": 以升序排列此列",
  "sSortDescending": ": 以降序排列此列"
 }
 },
 "dom":
  "<'row'<'span9'l<'#mytoolbox'>><'span3'f>r>"+
  "t"+
  "<'row'<'span6'i><'span6'p>>" ,
 initComplete:initComplete
 });
 
 });
 
 /**
 * 表格加载渲染完毕后执行的方法
 * @param data
 */
 function initComplete(data){
 
 var dataPlugin =
 '<div id="reportrange" class="pull-left dateRange" style="width:400px;margin-left: 10px"> '+
 '日期:<i class="glyphicon glyphicon-calendar fa fa-calendar"></i> '+
 '<span id="searchDateRange"></span> '+
 '<b class="caret"></b></div> ';
 $('#mytoolbox').append(dataPlugin);
 //时间插件
 $('#reportrange span').html(moment().subtract('hours', 1).format('YYYY-MM-DD HH:mm:ss') + ' - ' + moment().format('YYYY-MM-DD HH:mm:ss'));
 
 $('#reportrange').daterangepicker(
 {
  // startDate: moment().startOf('day'),
  //endDate: moment(),
  //minDate: '01/01/2012', //最小时间
  maxDate : moment(), //最大时间
  dateLimit : {
  days : 30
  }, //起止时间的最大间隔
  showDropdowns : true,
  showWeekNumbers : false, //是否显示第几周
  timePicker : true, //是否显示小时和分钟
  timePickerIncrement : 60, //时间的增量,单位为分钟
  timePicker12Hour : false, //是否使用12小时制来显示时间
  ranges : {
  //'最近1小时': [moment().subtract('hours',1), moment()],
  '今日': [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 HH:mm:ss', //控件中from和to 显示的日期格式
  separator : ' to ',
  locale : {
  applyLabel : '确定',
  cancelLabel : '取消',
  fromLabel : '起始时间',
  toLabel : '结束时间',
  customRangeLabel : '自定义',
  daysOfWeek : [ '日', '一', '二', '三', '四', '五', '六' ],
  monthNames : [ '一月', '二月', '三月', '四月', '五月', '六月',
  '七月', '八月', '九月', '十月', '十一月', '十二月' ],
  firstDay : 1
  }
 }, function(start, end, label) {//格式化日期显示框
 
  $('#reportrange span').html(start.format('YYYY-MM-DD HH:mm:ss') + ' - ' + end.format('YYYY-MM-DD HH:mm:ss'));
 });
 
 //设置日期菜单被选项 --开始--
 var dateOption ;
 if("${riqi}"=='day') {
 dateOption = "今日";
 }else if("${riqi}"=='yday') {
 dateOption = "昨日";
 }else if("${riqi}"=='week'){
 dateOption ="最近7日";
 }else if("${riqi}"=='month'){
 dateOption ="最近30日";
 }else if("${riqi}"=='year'){
 dateOption ="最近一年";
 }else{
 dateOption = "自定义";
 }
 $(".daterangepicker").find("li").each(function (){
 if($(this).hasClass("active")){
 $(this).removeClass("active");
 }
 if(dateOption==$(this).html()){
 $(this).addClass("active");
 }
 });
 //设置日期菜单被选项 --结束--
 
 
 //选择时间后触发重新加载的方法
 $("#reportrange").on('apply.daterangepicker',function(){
 //当选择时间后,出发dt的重新加载数据的方法
 table.ajax.reload();
 //获取dt请求参数
 var args = table.ajax.params();
 console.log("额外传到后台的参数值extra_search为:"+args.extra_search);
 });
 
 function getParam(url) {
 var data = decodeURI(url).split("?")[1];
 var param = {};
 var strs = data.split("&");
 
 for(var i = 0; i<strs.length; i++){
 param[strs[i].split("=")[0]] = strs[i].split("=")[1];
 }
 return param;
 }
 }

幸福小彩蛋: 

在网上搜索dateranggepicker的资料时,会找到一个比较官方的网站:http://www.daterangepicker.com/,api全面,但是实际的操作习惯并不便利;所以我更建议daterangepicker-bs3。

如果大家还想深入学习,可以点击这里进行学习,再为大家附两个精彩的专题:Bootstrap学习教程 Bootstrap实战教程

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery中使用了document和window哪些属性和方法小结
Sep 13 Javascript
js实现div的切换特效上一个下一个
Feb 11 Javascript
用原生js做个简单的滑动效果的回到顶部
Oct 15 Javascript
JavaScript中的Function函数
Aug 27 Javascript
javascript实现tab切换特效
Nov 12 Javascript
微信公众平台开发教程(五)详解自定义菜单
Dec 02 Javascript
JavaScript原生节点操作小结
Jan 17 Javascript
javaScript嗅探执行神器-sniffer.js
Feb 14 Javascript
详解vue-cli脚手架build目录中的dev-server.js配置文件
Nov 24 Javascript
小程序scroll-view组件实现滚动的示例代码
Sep 20 Javascript
详解JSON和JSONP劫持以及解决方法
Mar 08 Javascript
JavaScript Window窗口对象属性和使用方法
Jan 19 Javascript
AngularJS使用自定义指令替代ng-repeat的方法
Sep 17 #Javascript
Bootstrap Table表格一直加载(load)不了数据的快速解决方法
Sep 17 #Javascript
AngularJS中关于ng-class指令的几种实现方式详解
Sep 17 #Javascript
AngularJS中过滤器的使用与自定义实例代码
Sep 17 #Javascript
利用js编写响应式侧边栏
Sep 17 #Javascript
各式各样的导航条效果css3结合jquery代码实现
Sep 17 #Javascript
JavaScript编写一个简易购物车功能
Sep 17 #Javascript
You might like
php中禁止单个IP与ip段访问的代码小结
2012/07/04 PHP
谈谈关于php的优点与缺点
2013/04/11 PHP
php将session放入memcached的设置方法
2014/02/14 PHP
深入认识javascript中的eval函数
2009/11/02 Javascript
innerHTML 和 getElementsByName 在IE下面的bug 的解决
2010/04/09 Javascript
Jquery Change与bind事件代码
2011/09/29 Javascript
javascript简单事件处理和with用法介绍
2013/09/16 Javascript
js同源策略详解
2015/05/21 Javascript
实例解析jQuery插件EasyUI最常用的表单验证规则
2015/11/29 Javascript
JS Ajax请求如何防止重复提交
2016/06/13 Javascript
JS实现“隐藏与显示”功能(多种方法)
2016/11/24 Javascript
jQuery时间日期三级联动(推荐)
2016/11/27 Javascript
jQuery实现鼠标响应式透明度渐变动画效果示例
2018/02/13 jQuery
jquery获取select选中值的文本,并赋值给另一个输入框的方法
2018/08/21 jQuery
layui 图片上传+表单提交+ Spring MVC的实例
2019/09/21 Javascript
vue和iview实现Scroll 数据无限滚动功能
2019/10/31 Javascript
jQuery+ThinkPHP实现图片上传
2020/07/23 jQuery
python2.7 mayavi 安装图文教程(推荐)
2017/06/22 Python
Python实现读写sqlite3数据库并将统计数据写入Excel的方法示例
2017/08/07 Python
python消费kafka数据批量插入到es的方法
2018/12/27 Python
python正则表达式匹配不包含某几个字符的字符串方法
2019/07/23 Python
python cumsum函数的具体使用
2019/07/29 Python
Python3操作Excel文件(读写)的简单实例
2019/09/02 Python
给keras层命名,并提取中间层输出值,保存到文档的实例
2020/05/23 Python
基于Pyinstaller打包Python程序并压缩文件大小
2020/05/28 Python
检测浏览器对HTML5和CSS3支持度的方法
2015/06/25 HTML / CSS
英国标志性生活方式品牌:Skinnydip London
2019/12/15 全球购物
考博专家推荐信模板
2013/12/02 职场文书
会计电算化专业毕业生推荐信
2013/12/24 职场文书
KTV的创业计划书范文
2014/02/02 职场文书
多媒体教室标语
2014/06/26 职场文书
国际商务英语专业求职信
2014/07/08 职场文书
基层党员群众路线教育实践活动个人对照检查材料思想汇报
2014/10/05 职场文书
学生会招新宣传语
2015/07/13 职场文书
如何用threejs实现实时多边形折射
2021/05/07 Javascript
52条SQL语句教你性能优化
2021/05/25 MySQL