daterangepicker 清空_时间插件--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.代码:

daterangepicker组件Demo

$(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'));

});

});

单个

区间

maven常用插件配置详解

常用插件配置详解Java代码    tools

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

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

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

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

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

Maven 的 pom.xml 常用 变量 插件 配置 详解 一.变量 - 自定义变量及内置变量 1. 自定义变量

[转]阿里巴巴数据库连接池 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配置详解

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

随机推荐

Freemarker日期格式化处理

基本参数: date: 只显示日期,不显示时间.如${createTime?date} 或${createTime?date('yyyy-MM-dd')} time: 只显示时间,不显示日期如${cr ...

redo文件一

redo log files and redo log buffer redo log files的作用的是确保数据库崩溃之后能正确的恢复数据库,恢复数据库到一,致性的状态 redo log file ...

Eclipse+Maven命令创建webapp项目<三>

1.使用maven命令:mvn archetype:create -DgroupId=xxxxx -DartifactId=web-sample -DarchetypeArtifactId=maven ...

济南清北学堂游记 Day 1.

快住手!这根本不是暴力! 刷了一整天的题就是了..上午三道题的画风还算挺正常,估计是第一天,给点水题做做算了.. rqy大佬AK了上午的比赛! 当时我t2暴力写挂,还以为需要用啥奇怪的算法,后来发现, ...

freemarker报错之五

1.错误描述 freemarker.core.ParseException: Token manager error: freemarker.core.TokenMgrError: Lexical e ...

Java项目模板设置

/** * * @ClassName ${PACKAGE_NAME}.${NAME} * @description ${DESCRIPTION} * @author lisongyu * @creat ...

codeforce 240E

/* 最小树形图+保存路径 第一次想错了,各种wa,tle后网上看资料,找到一篇错误的题解... 最后用对着正解分析了一波,感觉对最小树形图又有了新的理解:最小树形图的精髓在于每张图更新的时间信息! ...

SpringMVC 学习 九 SSM环境搭建 (二) Spring配置文件的编写

spring配置文件中需要干的事情 (一)开启  Service与pojo包的注解扫描 注意:spring 扫描与表对应的实体类,以及service层的类,不能用来扫描Controller层的类,因为 ...

windows vs2017环境下编译webkit

源码地址:https://github.com/BlzFans/wke 先看官方的说明: Web和Flash的嵌入式3D游戏,基于WebKit 建筑工作单元 VS2005: 1安装Visual Stu ...