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 相关文章推荐
脚本吧 - 幻宇工作室用到js,超强推荐base.js
Dec 23 Javascript
PHP开发者必须掌握的6个关键字
Apr 14 Javascript
jquery实现鼠标滑过小图查看大图的方法
Jul 20 Javascript
基于HTML+CSS,jQuery编写的简易计算器后续(添加了键盘监听)
Jan 05 Javascript
js时间比较 js计算时间差的简单实现方法
Aug 26 Javascript
AngularJS指令中的绑定策略实例分析
Dec 14 Javascript
vue3.0 CLI - 2.2 - 组件 home.vue 的初步改造
Sep 14 Javascript
PWA介绍及快速上手搭建一个PWA应用的方法
Jan 27 Javascript
教你完全理解ReentrantLock重入锁
Jun 03 Javascript
Echarts地图添加引导线效果(labelLine)
Sep 30 Javascript
jQuery模仿ToDoList实现简单的待办事项列表
Dec 30 jQuery
基于JQuery实现页面定时弹出广告
May 08 jQuery
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中英混合字符串截取函数代码
2011/07/17 PHP
php获取文件大小的方法
2014/02/26 PHP
php 使用file_get_contents读取大文件的方法
2014/11/13 PHP
PHP动态生成指定大小随机图片的方法
2016/03/25 PHP
PHP常见过waf webshell以及最简单的检测方法
2019/05/21 PHP
PHP如何防止用户重复提交表单
2020/12/09 PHP
jquery鼠标滑过提示title具体实现代码
2013/08/06 Javascript
在JavaScript里防止事件函数高频触发和高频调用的方法
2014/09/06 Javascript
js+css实现文字散开重组动画特效代码分享
2015/08/21 Javascript
Angularjs中controller的三种写法分享
2016/09/21 Javascript
JavaScript之promise_动力节点Java学院整理
2017/07/03 Javascript
angularJs中$http获取后台数据的实例讲解
2018/08/08 Javascript
在NPM发布自己造的轮子的方法步骤
2019/03/09 Javascript
基于Vue 实现一个中规中矩loading组件
2019/04/03 Javascript
基于vue和bootstrap实现简单留言板功能
2020/05/30 Javascript
解决antd 下拉框 input [defaultValue] 的值的问题
2020/10/31 Javascript
[02:37]2015国际邀请赛选手档案—LGD.Xiao8
2015/07/28 DOTA
Python 实现简单的电话本功能
2015/08/09 Python
Python实现模拟分割大文件及多线程处理的方法
2017/10/10 Python
python绘制已知点的坐标的直线实例
2019/07/04 Python
python tornado修改log输出方式
2019/11/18 Python
python通过链接抓取网站详解
2019/11/20 Python
pycharm不能运行.py文件的解决方法
2020/02/12 Python
python爬虫实现获取下一页代码
2020/03/13 Python
如何打包Python Web项目实现免安装一键启动的方法
2020/05/21 Python
CSS3 transform的skew属性值图文详解
2014/07/21 HTML / CSS
迪卡侬荷兰官网:Decathlon荷兰
2017/10/29 全球购物
流行文化收藏品:Sideshow(DC漫画,星球大战,漫威)
2019/03/17 全球购物
销售经理工作职责范文
2013/12/03 职场文书
甜品店的创业计划书范文
2014/01/02 职场文书
领导干部对照检查材料
2014/08/24 职场文书
2014政府领导班子对照检查材料思想汇报(3篇)
2014/09/26 职场文书
2015年八一建军节慰问信
2015/03/23 职场文书
接收函
2019/04/22 职场文书
新学期新寄语,献给新生们!
2019/11/15 职场文书
浅谈python数据类型及其操作
2021/05/25 Python