1.序言: daterangepicker是Bootstrap的一个时间组件,使用很方便

用于选择日期范围的JavaScript组件。 设计用于Bootstrap CSS框架。

它最初是为了改善报表而创建的，它可以连接到任何网页元素，弹出两个日历，用于选择日期、时间或从预定义的范围，如“最后30天”。

2.需要的js和css:

bootstrap.min.css

daterangepicker.css

jquery-2.2.3.min.js

moment.js

daterangepicker.js

获取代码文件和js css文件地址:https://pan.baidu.com/s/12fjQSWkm5rlWi2dgPH_tyw 密码:elwb

3.配置详解参考网址:

配置详解(不太全,但够了):https://www.cnblogs.com/leijing0607/p/7698414.html

配置详解(配合上面一起看):http://blog.csdn.net/Webben/article/details/78319276

问题已经小BUG修复(可以看看):https://www.cnblogs.com/gtlm/p/7719739.html

4.代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>daterangepicker组件Demo</title>
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="daterangepicker.css">

<script src="jquery-2.2.3.min.js"></script>
<script src="daterangepicker/moment.js"></script>
<script src="daterangepicker/daterangepicker.js"></script>
<script type="text/javascript">

$(function () {
//单个时间插件
$("input[name='date1']").daterangepicker(
{
singleDatePicker: true,//设置为单个的datepicker，而不是有区间的datepicker 默认false
showDropdowns: true,//当设置值为true的时候，允许年份和月份通过下拉框的形式选择 默认false
autoUpdateInput: false,//1.当设置为false的时候,不给与默认值(当前时间)2.选择时间时,失去鼠标焦点,不会给与默认值 默认true
timePicker24Hour : true,//设置小时为24小时制 默认false
timePicker : false,//可选中时分 默认false
locale: {
format: "YYYY-MM-DD",
separator: " - ",
daysOfWeek: ["日","一","二","三","四","五","六"],
monthNames: ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"]
}

}
).on('cancel.daterangepicker', function(ev, picker) {
$("#date1").val("请选择日期");
$("#submitDate").val("");
}).on('apply.daterangepicker', function(ev, picker) {
$("#submitDate").val(picker.startDate.format('YYYY-MM-DD'));
$("#date1").val(picker.startDate.format('YYYY-MM-DD'));
});

//区间时间插件
$("input[name='date2']").daterangepicker(
{
// autoApply: true,
autoUpdateInput: false,
// alwaysShowCalendars: true,
ranges: {
'今天': [moment(),moment()],
'昨天': [moment().subtract(1, 'days'),moment().subtract(1, 'days')],
'近7天': [moment().subtract(7, 'days'), moment()],
'这个月': [moment().startOf('month'), moment().endOf('month')],
'上个月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
},
locale: {
format: "YYYY/MM/DD HH:MM:SS",
separator: " - ",
applyLabel: "确认",
cancelLabel: "清空",
fromLabel: "开始时间",
toLabel: "结束时间",
customRangeLabel: "自定义",
daysOfWeek: ["日","一","二","三","四","五","六"],
monthNames: ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"]
}
}
).on('cancel.daterangepicker', function(ev, picker) {
$("#date2").val("请选择日期范围");
$("#startTime").val("");
$("#endTime").val("");
}).on('apply.daterangepicker', function(ev, picker) {
$("#startTime").val(picker.startDate.format('YYYY-MM-DD'));
$("#endTime").val(picker.endDate.format('YYYY-MM-DD'));
$("#date2").val(picker.startDate.format('YYYY-MM-DD')+" 至 "+picker.endDate.format('YYYY-MM-DD'));
});

});
</script>
</head>
<body>
<div class="form-group">
<label>单个</label>
<div>
<input type="text" name="date1" id="date1" class="form-control" style="width: 20%;">
<input type="hidden" id = "submitDate" name="submitDate" class="form-control" />
</div>
</div>
<br>
<div class="form-group">
<label>区间</label>
<div>
<input type="text" name="date2" id="date2" class="form-control" style="width: 20%;">
<input type="hidden" id = "startTime" name="startTime" class="form-control" />
<input type="hidden" id = "endTime" name="endTime" class="form-control" />
</div>
</div>
</body>
</html>

时间插件--daterangepicker使用和配置详解的更多相关文章

  1. maven常用插件配置详解

    常用插件配置详解Java代码    <!-- 全局属性配置 --> <properties> <project.build.name>tools</proje ...

  2. GRUB2配置详解：默认启动项，超时时间，隐藏引导菜单，配置文件详解，图形化配置

    配置文件详解: /etc/default/grub # 设定默认启动项,推荐使用数字 GRUB_DEFAULT=0 # 注释掉下面这行将会显示引导菜单 #GRUB_HIDDEN_TIMEOUT=0 # ...

  3. webpack4配置详解之常用插件分享

    前言 继上一次webpack的基础配置分享之后,本次将分享一些工作中项目常用的配置插件.也会包含一些自己了解过觉得不错的插件,如有分析不到位的,欢迎纠错,嗯,这些东西文档都有,大佬可绕过. Wepac ...

  4. Maven 变量及常见插件配置详解

    Maven 的 pom.xml 常用 变量 插件 配置 详解 一.变量 - 自定义变量及内置变量 1. 自定义变量 <properties> <project.build.name& ...

  5. [转]阿里巴巴数据库连接池 druid配置详解

    一.背景 java程序很大一部分要操作数据库,为了提高性能操作数据库的时候,又不得不使用数据库连接池.数据库连接池有很多选择,c3p.dhcp.proxool等,druid作为一名后起之秀,凭借其出色 ...

  6. 日志分析工具ELK配置详解

    日志分析工具ELK配置详解 一.ELK介绍 1.1 elasticsearch 1.1.1 elasticsearch介绍 ElasticSearch是一个基于Lucene的搜索服务器.它提供了一个分 ...

  7. openfalcon架构及相关服务配置详解

    一:openfalcon组件 1.falcon-agent 数据采集组件 agent内置了一个http接口,会自动采集预先定义的各种采集项,每隔60秒,push到transfer. 2.transfe ...

  8. 阿里巴巴数据库连接池 druid配置详解

    一.背景 java程序很大一部分要操作数据库,为了提高性能操作数据库的时候,又不得不使用数据库连接池.数据库连接池有很多选择,c3p.dhcp.proxool等,druid作为一名后起之秀,凭借其出色 ...

  9. Centos7上部署openstack ocata配置详解

    之前写过一篇<openstack mitaka 配置详解>然而最近使用发现阿里不再提供m版本的源,所以最近又开始学习ocata版本,并进行总结,写下如下文档 OpenStack ocata ...

随机推荐

  1. 微信公众平台设置URL和Token接收接口事件推送

    最近做对接微信闪开发票-微信发票名片,里面有个接收用户提交抬头接口是微信推送事件到公众号后台,该事件将发送至开发者填写的URL(登录公众平台进入[开发者中心设置]). 开发者可通过事件推送完成数据统计 ...

  2. PHP 中的Trait

    概述 在PHP中有一种代码复用的技术, 因为单继承的问题, 有些公共方法无法在父类中写出, 而 Trait可以应对这种情况, 它可以定义一些复用的方法, 然后在你需要使用的类中将其引入即可. 刚开始的 ...

  3. JavaScript大师必须掌握的12个知识点

    既然你对这篇文章感兴趣,我想你应该是一位前端开发,也许你有一份不错的工作.自主创业甚至是一位自由从业者.不知你的前端技术如何,也许你是一位新手,亦或是一位资深开发. 如果你想让自己成为一个 JavaS ...

  4. js 递归修改json无限级key值

    var tree = [ { name: 'node1' }, { name: 'node2', children: [{ name: 'node-2-1' }, { name: 'node2-2' ...

  5. Ambari Agent 源码分析

    一.ambari-agent 启动方式 Ambari-Agent的启动脚本为/etc/init.d/ambari-agent.该脚本主要实现了start,stop,status,restart,res ...

  6. iOS----------计算一段代码执行时间

    CFAbsoluteTime start = CFAbsoluteTimeGetCurrent(); //在这写入要计算时间的代码 // do something CFAbsoluteTime end ...

  7. C# 一款属于自己的音乐播放器

    本文利用C# 调用Windows自带的Windows Media Player 打造一款属于自己的音乐播放器,以供学习分享使用,如有不足之处,还请指正. 概述 Windows Media Player ...

  8. 我的新书《Android App开发从入门到精通》终于出版啦

    前言 经过了两年多终于完成了这本书,2016年9月份开始写的,到今天为止2年零2个月,本书的内容大部分是去年完成的,看过我去年总结的读者可能知道,去年事情很多太忙了,导致本命年这本书没有上架(有点小小 ...

  9. PJSIP 自动化测试工具安装 Python安装

    Python安装,记录步骤如下 1.下载PythonIDE安装包 到官网 https://repo.continuum.io/archive/下载需要的版本,选择的Anaconda版本3的,当然也可以 ...

  10. sql 语句-初级进阶（二）

    1.insert插入数据时注意事项: 每次插入一整行,不能半行或者是几列数据. 值与列数必须相同,包括数据类型也必须匹配. 不能为标识列指定值(就是最前面的那一序号列),它是自动增长的 列的数据类型为 ...