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-双日历的更多相关文章

  1. daterangepicker双日历插件的使用

    今天主要是由于项目的需要,做了一个daterangepicker双日历插件,做出来的效果如下: 个人感觉这个daterangepicker双日历插件很好用,并且实现起来也不是很麻烦,我是根据它的官方文 ...

  2. daterangepicker 双日历/格式化日期/日期限制minDate，maxDate

    var locale = { "format": 'YYYY/MM/DD', "separator": " - ", "apply ...

  3. daterangepicker+ bootstrap +php +ajax +datatable双日历的使用

    在练习基于bootstrap   datatable的使用时,时间插件用到了daterangepicker,特做稍微了解,效果如图: 1.html <div class="panel& ...

  4. bootstrap之双日历时间段选择控件—daterangepicker(汉化版)

    jQuerybootstrapdaterangepicker汉化版 双日历时间段选择插件 — daterangepicker是bootstrap框架后期的一个时间控件,可以设定多个时间段选项,也可以自 ...

  5. 双日历时间段选择控件—daterangepicker(汉化版)

    daterangepicker的配置信息,记录下来方便设置: <pre name="code" class="html"><pre name= ...

  6. bootstrap之双日历时间段选择控件示例—daterangepicker(汉化版)

    效果图: 参考代码: <link href="/public/static/common/css/daterangepicker.min.css?ver=0.6" rel=& ...

  7. 基于bootstrap的双日历插件 daterangepicker

    我遇到需求是要求我将daterangepicker的一个双日期选择格式修改成两个单日期格式的日期选择框(方便手机端显示),要求如下: 1.两个单日期格式分别为开始日期和结束日期 2.开始日期可选择范围 ...

  8. bootstrap之双日历时间段选择控件示例—daterangepicker(中文汉化版)

    效果图: 参考代码: <link href="/css/daterangepicker.min.css?ver=0.6" rel="stylesheet" ...

  9. bootstrap双日历插件实例化

    网站中难免会用到日期选择插件,常见的有jquery的,也有bootstrap的.单日历的就不说了,实例化都比较简单.今天给大家介绍一下bootstrap的双日历插件. http://www.jq22. ...

  10. 日期时间范围选择插件:daterangepicker使用总结

    分享说明: 项目中要使用日期时间范围选择对数据进行筛选;精确到年月日 时分秒;起初,使用了layui的时间日期选择插件;但是在IIE8第一次点击会报设置格式错误;研究了很久没解决,但能确定不是layu ...

随机推荐

  1. java格式化数字、货币、金钱

    网上摘来的,以后可能会用到 java开发中经常会有数字.货币金钱等格式化需求,货币保留几位小数,货币前端需要加上货币符号等.可以用java.text.NumberFormat和java.text.De ...

  2. UWP蓝牙的例子

    https://answers.microsoft.com/zh-hans/windows/forum/windows_10-networking/%e5%9c%a8win10%e7%8e%af%e5 ...

  3. 杭电acm 1021题

    题意是要求能被3整除的数所以为了避免大数据的产生,直接对每个数据求余,然后相加 #include "iostream" using namespace std; int main( ...

  4. Amazon S3 云服务

    一.简介 Amazon Simple Storage Service (S3) 是一个公开的服务,Web 应用程序开发人员可以使用它存储数字资产,包括图片.视频.音乐和文档. S3 提供一个 REST ...

  5. Entity Framework Tutorial Basics（18）：DBEntityEntry Class

    DBEntityEntry Class DBEntityEntry is an important class, which is useful in retrieving various infor ...

  6. 面试经常问的一个问题：final、finalize、finally

    http://m.blog.csdn.net/u010980446/article/details/51493658

  7. Android camera调用出现错误解决方法

    开发时,先是使用三星的手机测试,发现一切正常: 但是到了小米的手机的时候,发现图片很模糊,发现是设置camera.setParameters(parameters);报错导致用的是默认的最小的分辨率, ...

  8. C# 链表 --增 -删-反转-删除最小值

    1. Node.cs namespace 链表 { public class Node<T> { public T Data; //这个就是地址 public Node<T> ...

  9. 图片展示js特效

    html 代码片段,做一个table表格 <table width="798" height="276" border="0" ali ...

  10. Eavl整理

    一. 严格模式 eval方法只能在非严格模式中进行使用,在use strict中是不允许使用这个方法的. 二. 用法 eval函数会接收一个参数obj,如果obj不是一个字符串,那么eval会直接返回 ...