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 相关文章推荐
Mozilla 表达式 __noSuchMethod__
Apr 05 Javascript
改变javascript函数内部this指针指向的三种方法
Apr 23 Javascript
javascript全局变量封装模块实现代码
Nov 28 Javascript
复制网页内容,粘贴之后自动加上网址的实现方法(脚本之家特别整理)
Oct 16 Javascript
jQuery中slice()方法用法实例
Jan 07 Javascript
jQuery简单实现上下,左右滑动的方法
Jun 01 Javascript
JS基于面向对象实现的选项卡效果示例
Dec 20 Javascript
详解从新建vue项目到引入组件Element的方法
Aug 29 Javascript
vue组件父与子通信详解(一)
Nov 07 Javascript
vue.js 2.*项目环境搭建、运行、打包发布的详细步骤
May 01 Javascript
vue递归获取父元素的元素实例
Aug 07 Javascript
antd design table更改某行数据的样式操作
Oct 31 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中模拟POST传递数据的两种方法分享
2011/09/16 PHP
PHP session 会话处理函数
2016/06/06 PHP
搭建自己的PHP MVC框架详解
2017/08/16 PHP
PHP 中 var_export、print_r、var_dump 调试中的区别
2018/06/19 PHP
ASP SQL防注入的方法
2008/12/25 Javascript
验证javascript中Object和Function的关系的三段简单代码
2010/06/27 Javascript
33个优秀的 jQuery 图片展示插件分享
2012/03/14 Javascript
解析javascript 实用函数的使用详解
2013/05/10 Javascript
动态加载iframe时get请求传递中文参数乱码解决方法
2014/05/07 Javascript
JavaScript实现的内存数据库LokiJS介绍和入门实例
2014/11/17 Javascript
Bootstrap轮播加上css3动画,炫酷到底!
2015/12/22 Javascript
JS出现失效的情况总结
2017/01/20 Javascript
VUE element-ui 写个复用Table组件的示例代码
2017/11/18 Javascript
vue 根据数组中某一项的值进行排序的方法
2018/08/30 Javascript
在AngularJs中设置请求头信息(headers)的方法及不同方法的比较
2018/09/04 Javascript
扫微信小程序码实现网站登陆实现解析
2019/08/20 Javascript
Python中的闭包实例详解
2014/08/29 Python
python3实现ftp服务功能(服务端 For Linux)
2017/03/24 Python
python 连接sqlite及简单操作
2017/06/30 Python
python实现壁纸批量下载代码实例
2018/01/25 Python
详解Python的hasattr() getattr() setattr() 函数使用方法
2018/07/09 Python
Python实现的简单计算器功能详解
2018/08/25 Python
Python判断一个list中是否包含另一个list全部元素的方法分析
2018/12/24 Python
python实现控制台打印的方法
2019/01/12 Python
对Python3中列表乘以某一个数的示例详解
2019/07/20 Python
使用Python代码实现Linux中的ls遍历目录命令的实例代码
2019/09/07 Python
资生堂美国官网:Shiseido美国
2016/09/02 全球购物
size?荷兰官方网站:英国高级运动鞋精品店
2020/07/24 全球购物
小米官方旗舰店:Xiaomi
2020/08/07 全球购物
五星级酒店餐饮部总监的标准岗位职责
2014/02/17 职场文书
文案策划岗位个人自我评价(范文)
2019/08/08 职场文书
60条职场经典语录,总有一条能触动你的心
2019/08/21 职场文书
详解PHP Swoole与TCP三次握手
2021/05/27 PHP
Python中else的三种使用场景
2021/06/16 Python
英国数字版游戏销量周榜公布 《小缇娜的奇幻之地》登顶
2022/04/03 其他游戏
Android使用EventBus发送消息,Fragment中接收消息的方法会执行多次
2022/04/24 Java/Android