daterangepicker+ bootstrap +php +ajax +datatable双日历的使用
在练习基于bootstrap datatable的使用时,时间插件用到了daterangepicker,特做稍微了解,效果如图:
1、html
<div class="panel">
<div class="input-group" id="id_search_date">
<span>按开站时间查询:</span>
<span class="add-on input-group-addon">
<i class="glyphicon glyphicon-calendar fa fa-calendar" style="font-size: 18px"></i>
</span>
<input type="text" readonly style="width:220px" name="reportrange" id="reportrange" class="form-control" value=""/>
<button type="button" id="reset" class="btn-sm btn-primary">复位</button>
</div>
</div>
2、css、js引入
<link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="./css/dataTables.bootstrap.min.css" rel="stylesheet">
<link href="./css/daterangepicker.css" rel="stylesheet" media="screen"> <script src="./js/jquery-3.1.1.min.js"></script>
<script src="./js/jquery.dataTables.min.js"></script>
<script src="./js/dataTables.bootstrap.min.js"></script>
<script src="./js/moment.min.js"></script>
<script src="./js/daterangepicker.js" charset="UTF-8"></script>
3、js配置
/*****时间插件************************************************************************************************/
var start = moment().subtract(29, 'days');
var end = moment();
function cb(start, end) {
$('#reportrange span').html(start.format('YYYY-MMMM-D') + ' - ' + end.format('YYYY-MMMM-D'));
}
$('#reportrange').daterangepicker({
//minDate: '01/01/2012', //最小时间
//maxDate : moment(), //最大时间
//dateLimit : { days : 30 }, //起止时间的最大间隔
showDropdowns : true,
// timePicker : true, //是否显示小时和分钟
"linkedCalendars": false,
"showCustomRangeLabel": false,
"alwaysShowCalendars": true,
"opens": "right", //日期选择框的弹出位置
startDate: start,
endDate: end,
ranges: {
//'最近1小时': [moment().subtract('hours',1), moment()],
'今天': [moment(), moment()],
'昨天': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'最近7天': [moment().subtract(6, 'days'), moment()],
'最近30天': [moment().subtract(29, 'days'), moment()],
'本月': [moment().startOf('month'), moment().endOf('month')],
'上个月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
},
locale : {
applyLabel : '确定',
cancelLabel : '取消',
fromLabel : '起始时间',
toLabel : '结束时间',
customRangeLabel : '自定义',
daysOfWeek : [ '日', '一', '二', '三', '四', '五', '六' ],
monthNames : [ '一月', '二月', '三月', '四月', '五月', '六月',
'七月', '八月', '九月', '十月', '十一月', '十二月' ],
firstDay : 1
},
buttonClasses : [ 'btn btn-default' ],
applyClass : 'btn-small btn-primary blue',
cancelClass : 'btn-small',
}, cb);
cb(start, end);
//时间复位按钮
$("#reset").click(function () {
$('#reportrange').val(' ');
});
/*****时间插件************************************************************************************************/
附件为本例代码:参考 基于bootstrap + php +ajax datatable 插件的使用终极总结篇
引用文件下载地址:https://github.com/dangrossman/bootstrap-daterangepicker
参数参考:bootstrap之双日历时间段选择控件—daterangepicker(汉化版)
daterangepicker+ bootstrap +php +ajax +datatable双日历的使用的更多相关文章
- 基于bootstrap + php +ajax datatable 插件的使用
Datatables是一款jquery表格插件.它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能. 下面是我学习datatables写的一个服务器端(php)分页例子,该功能包含的功能 ...
- bootstrap的ajax提交
一般后台界面都用bootstrap框架,这是一个css框架,里面封装了ajax方法,只需要在样式中指定就行,根本自己不用写 <td> <eq name='item.status' v ...
- bootstrap和ajax相结合
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- bootstrap通过ajax请求JSON数据后填充到模态框
1. JSP页面中准备模态框 <!-- 详细信息模态框(Modal) --> <div> <div class="modal fade" id=& ...
- daterangepicker双日历插件的使用
今天主要是由于项目的需要,做了一个daterangepicker双日历插件,做出来的效果如下: 个人感觉这个daterangepicker双日历插件很好用,并且实现起来也不是很麻烦,我是根据它的官方文 ...
- Oracle数据库开发
Oracle数据库开发之PL/SQL基础实战视频课程 1 PL/SQL 简介 2 入门实例(一) 3 入门实例(二) 4 PL/SQL 变量和常量 5 PL/SQL数据类型(一) 6 PL/SQL数据 ...
- Python学习路程day21
本节内容: 项目实战:开发一个WEB聊天室 功能需求: 用户可以与好友一对一聊天 可以搜索.添加某人为好友 用户可以搜索和添加群 每个群有管理员可以审批用户的加群请求,群管理员可以用多个,群管理员可以 ...
- 说说web 2.0生态圈的那些事
先来说一道面试题吧,“说一下,web 2.0 和web 1.0的区别?” 官方的解释是这样的: Web1.0 的主要特点在于用户通过浏览器获取信息,Web2.0 则更注重用户的交互作用,用户既是网站内 ...
- php + Bootstrap-v3-Typeahead 自动完成组件的使用
Bootstrap 中的 Typeahead 组件就是通常所说的自动完成 AutoComplete,类似百度.谷歌等搜索提示:输入关键词出现相应的下拉列表数据. 是Bootstrap-3-Typeah ...
随机推荐
- 优惠分摊算法 php版
<?php /* * 优惠分摊,算法很多,这里是从shopnc挖出来,适合优惠条件过滤的算法,实质很简单,但是理解难度还是有一点 * * 一个订单的商品,如果不参与某种活动,需要分摊优惠,一般来 ...
- javascript中矩形的碰撞检测---- 计算碰撞部分的面积
今天在做一个拖拽改变元素排序的东西的时候,在做被拖动元素同时碰撞到两个元素时,究竟应该与哪个元素交换位置的问题上,纠结到崩溃,实在是想不到别的办法去做了,只能去想办法计算碰撞的面积. 这应该不是最合适 ...
- osip2 代码分析
主要类型定义: 1.osip_t /** * Structure for osip handling. * In order to use osip, you have to manage at le ...
- equals(),hashcode(),克隆学习心得
equals(),hashcode(),克隆学习心得 其实在开发时候,很少去重写equals(),hashCode()方法,但是有些时候业务需要还是要重写. 注意: 重写equals()方法一定要重写 ...
- 高性能Server---Reactor模型
原文地址:http://www.ivaneye.com/2016/07/23/iomodel.html 无处不在的C/S架构 在这个充斥着云的时代,我们使用的软件可以说99%都是C/S架构的! 你发邮 ...
- mvc配合jquery.validate验证失效,情况之一
用viewbage绑定input空间的value值,通过submit提交.validate验证失效. 1.应该是mvc的渲染顺序导致js验证失败. 解决方案:改用mvc自带的@html辅助方法,生成文 ...
- linux系统文件权限
Linux文件权限详解 文件和目录权限概述 在linux中的每一个文件或目录都包含有访问权限,这些访问权限决定了谁能访问和如何访问这些文件和目录.通过设定权限可以从以下三种访问方式限制访问权限:只允许 ...
- C# 日期格式转【转】
使用:DateTime.ToString的方法(String, IFormatProvider)转换格式 using System; using System.Globalization; Strin ...
- JS基础知识
JavaScript的三个不同的组成部分: (1)ECMAScript,提供核心语言功能,所有浏览器大体上都支持ECMA第三版 (2)文本对象模型(DOM),提供访问和操作网页内容的方法和接口 (3) ...
- Asp.net Mvc中分部视图获取后台数据并展示
方式一: 1.主页面中代码: @{Html.RenderAction("CreateLeftMenu");} 2.Controller中代码: public PartialView ...