daterangepicker-双日历
js脚本和css样式,到bootstrap官网去下载
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="Default/jquery-1.9.1.min.js"></script>
<script src="Default/bootstrap.js"></script>
<script src="Default/modealayer.js/layer/layer.min.js"></script>
<script src="Default/modealayer.js/layer/w-modal-3.0-min.js"></script>
<script src="Default/w_formList/w-list-min.js"></script>
<script src="Default/dateTime/dateTiemMain.js"></script>
<link href="Default/dateTime/daterangepicker-bs3.css" rel="stylesheet" />
<script src="Default/dateTime/moment.min.js"></script>
<script src="Default/dateTime/datepicker.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
</head>
<body>
<!--双日历-->
<div class="w-l-doudate">
<div class="col-lg-2 w-l-doudate-g">
<div class="input-group">
<span class="input-group-addon w-input-group-addon w-date-ioc w-l-fd">
<i class="fa fa-plus fa-calendar"></i>
</span>
<input type="text" class="form-control notext" id="SelectDate" placeholder="请选择时间" readonly="readonly" />
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
//双日历 实例
$('#SelectDate').daterangepicker({
startDate: moment().startOf('day'),
format: 'YYYY/MM/DD', timePicker: false, showDropdowns: true,
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: 'left',
}, function (start, end, label) {
});
})
function GetCheckboxVal() {
var cheval = Getccxvstate();
}
</script>
</body>
</html>
daterangepicker-双日历的更多相关文章
- daterangepicker双日历插件的使用
今天主要是由于项目的需要,做了一个daterangepicker双日历插件,做出来的效果如下: 个人感觉这个daterangepicker双日历插件很好用,并且实现起来也不是很麻烦,我是根据它的官方文 ...
- daterangepicker 双日历/格式化日期/日期限制minDate,maxDate
var locale = { "format": 'YYYY/MM/DD', "separator": " - ", "apply ...
- daterangepicker+ bootstrap +php +ajax +datatable双日历的使用
在练习基于bootstrap datatable的使用时,时间插件用到了daterangepicker,特做稍微了解,效果如图: 1.html <div class="panel& ...
- bootstrap之双日历时间段选择控件—daterangepicker(汉化版)
jQuerybootstrapdaterangepicker汉化版 双日历时间段选择插件 — daterangepicker是bootstrap框架后期的一个时间控件,可以设定多个时间段选项,也可以自 ...
- 双日历时间段选择控件—daterangepicker(汉化版)
daterangepicker的配置信息,记录下来方便设置: <pre name="code" class="html"><pre name= ...
- bootstrap之双日历时间段选择控件示例—daterangepicker(汉化版)
效果图: 参考代码: <link href="/public/static/common/css/daterangepicker.min.css?ver=0.6" rel=& ...
- 基于bootstrap的双日历插件 daterangepicker
我遇到需求是要求我将daterangepicker的一个双日期选择格式修改成两个单日期格式的日期选择框(方便手机端显示),要求如下: 1.两个单日期格式分别为开始日期和结束日期 2.开始日期可选择范围 ...
- bootstrap之双日历时间段选择控件示例—daterangepicker(中文汉化版)
效果图: 参考代码: <link href="/css/daterangepicker.min.css?ver=0.6" rel="stylesheet" ...
- bootstrap双日历插件实例化
网站中难免会用到日期选择插件,常见的有jquery的,也有bootstrap的.单日历的就不说了,实例化都比较简单.今天给大家介绍一下bootstrap的双日历插件. http://www.jq22. ...
- 日期时间范围选择插件:daterangepicker使用总结
分享说明: 项目中要使用日期时间范围选择对数据进行筛选;精确到年月日 时分秒;起初,使用了layui的时间日期选择插件;但是在IIE8第一次点击会报设置格式错误;研究了很久没解决,但能确定不是layu ...
随机推荐
- python http认证
Requests 库有一个auth 模块专门用来处理HTTP 认证: import requestsfrom requests.auth import AuthBasefrom requests.au ...
- C++读入整行字符串的方法
string s; getline(cin,s); cout<<s<<endl; ]; scanf("%[^\n]%*c",s); printf(" ...
- 数字图像处理实验(5):Proj03-01 ~ Proj03-06 标签: 图像处理matlab 2017-04-30 10:39 184人阅读
PROJECT 03-01 : Image Enhancement Using Intensity Transformations 实验要求: Objective To manipulate a te ...
- Java50道经典习题-程序47 输入数字打印星号
题目:读取7个数(1—50)的整数值,每读取一个值,程序打印出该值个数的*. import java.util.Scanner; public class Prog47{ public static ...
- DropDownList判断值是否存在下拉列表中
//1.值是text string aa= Request.QueryString["CallReason"].ToString();//获取传值 if (DropDownList ...
- 转:IDEA 与 eclipse 的部分区别!
Idea 与 Eclipse 快捷键的区别,上为Eclipse的快捷键,下为Idea的快捷键查找类名CTRL + SHIFT + RCTRL + N 查找JAR包中的类CTRL + SHIFT + T ...
- Django之后台管理一
所有的网站都有一个管理后台来对所有的网站数据进行管理.那么Django的后台管理是如何进行的.在网页中输入http://127.0.0.1:8001/admin.得到如下的登录界面 在这里可以看到管理 ...
- Unity UGUI 原理篇(二):Canvas Scaler 縮放核心
https://blog.csdn.net/gz_huangzl/article/details/52484611 Canvas Scaler Canvas Scaler是Unity UI系統中,控制 ...
- fabric java chaincode 开发
链码的开发不部分参考官网demo即可. 本文不会详细介绍开发过程 笔者启动的是一个gradle工程,也就是jar包管理使用的是gradle. chaincode 源码: /* Copyright IB ...
- windows-bat配置环境变量的几个坑点
今天因为学校机房问题,想自动化安装vim,不料在编bat的时候不熟练,搞了很久. 坑点1.%path%访问到的是用户的path,而不是系统的path.所以增加环境变量的时候只能增加用户的path.我就 ...