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

在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实战教程

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索bootstrap
， datetimepicker
， 时间选择器
daterangepicker
datetimepicker range、mui picker选择器、picker选择器、zepto picker 选择器、picker日期选择器，以便于您获取更多的相关知识。

时间： 2024-08-02 03:39:43

Bootstrap时间选择器datetimepicker和daterangepicker使用实例解析_javascript技巧的相关文章

基于BootStrap的图片轮播效果展示实例代码_javascript技巧

先给大家展示下bootstrap图片轮播图,效果如下所示,如果大家感觉效果还不错,请继续往下阅读,参考实现代码. 废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="

使用Bootstrap框架制作查询页面的界面实例代码_javascript技巧

以Bootstrap框架来进行设计和开发,是目前国际上比较流行的一个趋势.很多软件公司在优化新产品时,因为其在js和控件上的综合优势,会选用这个开发框架. Bootstrap框架是一个前端UI设计的框架,它提供了统一的UI界面,简化了设计界面UI的过程(缺点是定制了界面,调整的余地不是太大).尤其是现在的响应时布局(我的理解是页面根据不同的分辨率,采用不同的页面元素的布局),在Bootstrap中很好的支持了,只要简单设置了属性,就能自动实现响应时布局,大大简化了程序员的界面的过程. 因此,本人

BootStrapTable服务器分页实例解析_javascript技巧

项目中经常会使用到表格,数据量大的时候还需要进行分页,项目设计阶段,我选择了bootstrapTable的js插件,个人觉得这个框架非常好用,支持服务器端分页,此篇主要写的主要是关于服务器分页.之前遇到的问题时服务器分页,在服务器端接收的参数为null.查了资料发现少了参数 主要引入js <script type="text/javascript" src="<%=path%>/plugins/bootstrap-table/bootstrap-table.

Vuejs第六篇之Vuejs与form元素实例解析_javascript技巧

本文是小编结合官方文档整理的一篇细致代码更多更全的详细教程,非常适合新手学习,感兴趣的朋友一起看看吧! 资料来于官方文档: http://cn.vuejs.org/guide/forms.html 表单绑定 ①常见绑定方法: [1]文本输入框绑定: [2]textarea绑定(类似[1]): [3]radio选中值绑定: [4]checkbox绑定(自动捆绑数组,无需name): [5]select绑定: [6]select multiple多选选中框绑定: [7]动态绑定(以上不同类型但同一个

JS 拦截全局ajax请求实例解析_javascript技巧

你是否有过下面的需求:需要给所有ajax请求添加统一签名.需要统计某个接口被请求的次数.需要限制http请求的方法必须为get或post.需要分析别人网络协议等等,那么如何做?想想,如果能够拦截所有ajax请求,那么问题就会变的很简单!?,少年,想法有点大胆,不过,我欣赏!直接上轮子,Ajax-hook不仅可以满足你想要的,同时可以给你更多. Ajax-hook源码地址 : https://github.com/wendux/Ajax-hook 如何使用 1.引入ajaxhook.js <scr

Vuejs第八篇之Vuejs组件的定义实例解析_javascript技巧

本文参考官方文档整理的一篇更加细致代码更加安全的一篇适合新手阅读学习吧教程. 本篇资料来于官方文档: http://cn.vuejs.org/guide/components.html 什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展. 组件的定义 ①组件的作用: [1]扩展HT

JSP基于Bootstrap分页显示实例解析_javascript技巧

首先介绍一款简单利落的分页利器:bootstrap-paginator,可以参考:Bootstrap Paginator分页插件使用方法详解 这篇文章进行学习. 效果截图:   GitHub官方下载地址:https://github.com/lyonlai/bootstrap-paginator  下面就来详细介绍一下基于这款分页利器的JSP分页显示实现过程(注:相较于原网页我隐去了很多不必要的内容,本例只专注于分页显示的实现) 一.为什么需要分页显示?  这篇博文说得很透彻:分页技术原理与实现

Bootstrap图片轮播组件使用实例解析_javascript技巧

使用Bootstrap来编写图片轮播组件Carousel,则能够节约很多时间,图片轮播组件是一个在网页中很常见的技术,但是如果直接编写的话,需要很长的JavaScript编码,同时也不好控制大小.  同时说一下,Carousel这个词的本义是回旋木马.  一.基本目标在网页编写多张图片的轮播组件Carousel,鼠标放在上面自带悬停效果,并且在每张图片下面配有图片说明.  由于笔者的电脑视频录制软件比较渣,也觉得没必要画太多时间在这上面,觉得只要能说明问题就行,所以下面的GIF失色比较严重,但是

Bootstrap菜单按钮及导航实例解析_javascript技巧

下拉菜单 特别声明:因为Bootstrap的组件交互效果都是依赖于jQuery库写的插件,所以在使用bootstrap.min.js之前一定要先加载jquery.min.js才会生效果. <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-tog