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 相关文章推荐
Prototype使用指南之selector.js说明
Oct 26 Javascript
学习JS面向对象成果 借国庆发布个最新作品与大家交流
Oct 03 Javascript
jquery 插件开发方法小结
Oct 23 Javascript
jstree的简单实例
Dec 01 Javascript
jquery二级目录选中当前页的css样式
Dec 08 Javascript
微信小程序小组件 基于Canvas实现直播点赞气泡效果
May 29 Javascript
JavaScript+Canvas实现彩色图片转换成黑白图片的方法分析
Jul 31 Javascript
React中如何引入Angular组件详解
Aug 09 Javascript
js中位运算的运用实例分析
Dec 11 Javascript
详解vue2.6插槽更新v-slot用法总结
Mar 09 Javascript
vue实现简单的日历效果
Sep 24 Javascript
Angular8 简单表单验证的实现示例
Jun 03 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数组编码转换示例详解
2014/03/11 PHP
PHP5.3安装Zend Guard Loader图文教程
2014/09/29 PHP
标准版Eclipse搭建PHP环境的详细步骤
2015/11/18 PHP
php采用session实现防止页面重复刷新
2015/12/24 PHP
PHP时间类完整实例(非常实用)
2015/12/25 PHP
ThinkPHP连接Oracle数据库
2016/04/22 PHP
laravel orm 关联条件查询代码
2019/10/21 PHP
在html页面中包含共享页面的方法
2008/10/24 Javascript
JQuery跳出each循环的方法
2015/04/16 Javascript
js+html5实现canvas绘制简单矩形的方法
2015/06/05 Javascript
asp.net+jquery.form实现图片异步上传的方法(附jquery.form.js下载)
2016/05/05 Javascript
AngularJS教程之简单应用程序示例
2016/08/16 Javascript
Node.js数据库操作之连接MySQL数据库(一)
2017/03/04 Javascript
jquery实现折叠菜单效果【推荐】
2017/03/08 Javascript
微信小程序踩坑记录之解决tabBar.list[3].selectedIconPath大小超过40kb
2018/07/04 Javascript
重新认识vue之事件阻止冒泡的实现
2018/08/02 Javascript
js实现下拉框二级联动
2018/12/04 Javascript
vue轮播组件实现$children和$parent 附带好用的gif录制工具
2019/09/26 Javascript
python常用函数详解
2016/09/13 Python
Python实现Windows和Linux之间互相传输文件(文件夹)的方法
2017/05/08 Python
Python3.6基于正则实现的计算器示例【无优化简单注释版】
2018/06/14 Python
对Python 多线程统计所有csv文件的行数方法详解
2019/02/12 Python
python批量处理文件或文件夹
2020/07/28 Python
python给图像加上mask,并提取mask区域实例
2020/01/19 Python
使用 Python 遍历目录树的方法
2020/02/29 Python
解决pycharm不能自动补全第三方库的函数和属性问题
2020/03/12 Python
基于python模拟TCP3次握手连接及发送数据
2020/11/06 Python
Css3新特性应用之形状总结
2016/12/08 HTML / CSS
Photobook澳大利亚:制作相片书,婚礼卡,旅行相簿
2017/01/12 全球购物
Godiva巧克力英国官网:比利时歌帝梵巧克力
2018/08/28 全球购物
法学个人求职信范文
2014/01/27 职场文书
元旦晚会邀请函
2014/02/01 职场文书
100句人生哲理语录集锦:强者征服今天,懒汉坐等明天
2019/10/18 职场文书
Python自然语言处理之切分算法详解
2021/04/25 Python
golang elasticsearch Client的使用详解
2021/05/05 Golang
《原神》新角色演示“神里绫人:林隐泓洄” 宠妹狂魔
2022/04/03 其他游戏