时间插件--daterangepicker使用和配置详解

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">

$(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使用和配置详解的更多相关文章

maven常用插件配置详解
常用插件配置详解Java代码  <properties> <project.build.name>tools</proje ...
GRUB2配置详解：默认启动项，超时时间，隐藏引导菜单，配置文件详解，图形化配置
配置文件详解: /etc/default/grub # 设定默认启动项,推荐使用数字 GRUB_DEFAULT=0 # 注释掉下面这行将会显示引导菜单 #GRUB_HIDDEN_TIMEOUT=0 # ...
webpack4配置详解之常用插件分享
前言继上一次webpack的基础配置分享之后,本次将分享一些工作中项目常用的配置插件.也会包含一些自己了解过觉得不错的插件,如有分析不到位的,欢迎纠错,嗯,这些东西文档都有,大佬可绕过. Wepac ...
Maven 变量及常见插件配置详解
Maven 的 pom.xml 常用变量插件配置详解一.变量 - 自定义变量及内置变量 1. 自定义变量 <properties> <project.build.name& ...
[转]阿里巴巴数据库连接池 druid配置详解
一.背景 java程序很大一部分要操作数据库,为了提高性能操作数据库的时候,又不得不使用数据库连接池.数据库连接池有很多选择,c3p.dhcp.proxool等,druid作为一名后起之秀,凭借其出色 ...
日志分析工具ELK配置详解
日志分析工具ELK配置详解一.ELK介绍 1.1 elasticsearch 1.1.1 elasticsearch介绍 ElasticSearch是一个基于Lucene的搜索服务器.它提供了一个分 ...
openfalcon架构及相关服务配置详解
一:openfalcon组件 1.falcon-agent 数据采集组件 agent内置了一个http接口,会自动采集预先定义的各种采集项,每隔60秒,push到transfer. 2.transfe ...
阿里巴巴数据库连接池 druid配置详解
一.背景 java程序很大一部分要操作数据库,为了提高性能操作数据库的时候,又不得不使用数据库连接池.数据库连接池有很多选择,c3p.dhcp.proxool等,druid作为一名后起之秀,凭借其出色 ...
Centos7上部署openstack ocata配置详解
之前写过一篇<openstack mitaka 配置详解>然而最近使用发现阿里不再提供m版本的源,所以最近又开始学习ocata版本,并进行总结,写下如下文档 OpenStack ocata ...

随机推荐

Spring笔记03_AOP
目录 1. AOP 1.1 AOP介绍 1.1.1 什么是AOP 1.1.2 AOP实现原理 1.1.3 AOP术语[掌握] 1.2 AOP的底层实现(了解) 1.2.1 JDK动态代理 1.2.2 ...
CSS3 box-shadow 属性紧跟在 -webkit-, -ms- 或 -moz-
浏览器支持表格中的数字表示支持该属性的第一个浏览器版本号. 紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号. 语法 box-shadow: h-s ...
C#中的yield return用法演示源码
下边代码段是关于C#中的yield return用法演示的代码. using System;using System.Collections;using System.Collections.Gene ...
腾讯云服务器配置node环境
1:更新现有包 sudo apt-get update 2:安装依赖 sudo apt-get install vim openssl build-essential libssl-dev wget ...
No module named "Crypto"，如何安装Python三方模块Crypto
前两天公司公司老总让我研究怎么用企业微信第三方应用进行官网对接,完成URL回调验证问题. 具体如何进行Python 的Django网站与企业微信第三方应用进行回调验证的博客地址为:https://ww ...
MongoDB 创建索引的语法
1.为普通字段添加索引,并且为索引命名 db.集合名.createIndex( {"字段名": 1 },{"name":'idx_字段名'}) 说明: (1)索 ...
导入JavaWeb 项目出现的问题
前言: 环境: windown 10 JDK 1.8 Tomcat 7 eclipse 导入项目下面错误是出现的问题 Multiple annotations found at this line: ...
Session, Token, OAuth 鉴权那些事儿
鉴权那些事整体思路无论什么样的服务, Web 服务总是不能绕开鉴权这个话题的, 通过有效的鉴权手段来保护网站数据, 来为特定用户提供服务. 整体来说, 有三种方式: Session-Cookie ...
消息 4900，级别 16，状态 2，第 1 行对表 'XX.XXX' 执行 ALTER TABLE SWITCH 语句失败。对于已启用更改跟踪的表，不可能切换其分区。请先禁用更改跟踪，再使用 ALTER TABLE SWITCH。
问题描述: 今天处理切换分区数据的时候出现了这个错误: 消息 4900,级别 16,状态 2,第 1 行对表 'XX.XXX' 执行 ALTER TABLE SWITCH 语句失败.对于已启用更改跟 ...
英语背单词app
乐词 √ 真人发音词根词缀小组计划及时复习真人例句墨墨单词量测试做的特别好扇贝哈哈哈,没用过百词斩同样25个单词,我在乐词中背了20分钟,在百词斩中需要60分钟. 原因在于要记单词 ...

时间插件--daterangepicker使用和配置详解

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

随机推荐

热门专题