参数介绍:

参数 格式 示例 含义
startDate MM/DD/YYYY “startDate”:”10/14/2017” 设置默认的开始日期
endDate MM/DD/YYYY “endDate”:”10/22/2017” 设置默认的结束日期
minDate MM/DD/YYYY “minDate”:”10/14/1995” 设置最小可用日期
maxDate MM/DD/YYYY “maxDate”:”10/14/2017” 设置最大可用日期
autoApply true/false 默认值:false 不用点击Apply或者应用按钮就可以直接取得选中的日期
singleDatePicker true/false 默认值:false 设置为单个的datepicker,而不是有区间的datepicker
singleDatePicker true/false 默认值:false 设置为单个的datepicker,而不是有区间的datepicker
showDropdowns true/false 默认值:false 当设置值为true的时候,允许年份和月份通过下拉框的形式选择
timePicker true/false 默认值:false 可选中时分
timePicker24Hour true/false 默认值:false 设置小时为24小时制
timePickerSeconds true/false 默认值:false 可选中秒
opens 可选值:right left center 默认值:center 设置datepicker面板防止的位置:左边、右边或者中间
drops 可选值:down up 默认值:down 设置面板防止的位置:input输入框上面或者input输入框下面
locale     本地配置
locale.applyLabel     确认按钮文字
locale.cancelLabel     取消按钮文字
locale.format     格式
详细例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css"/>
<link href="http://cdn.bootcss.com/bootstrap-daterangepicker/2.1.25/daterangepicker.css" rel="stylesheet">
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap-daterangepicker/2.1.25/moment.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap-daterangepicker/2.1.25/daterangepicker.js"></script>
</head>
<body>
<div class="input-group">
<button type="button" class="btn btn-default pull-right" id="daterange-btn">
<i class="fa fa-calendar"></i>
<span>时间</span>
<i class="fa fa-caret-down"></i>
</button>
</div>
<script>
function init() {
//定义locale汉化插件
var locale = {
"format": 'YYYY-MM-DD',
"separator": " -222 ",
"applyLabel": "确定",
"cancelLabel": "取消",
"fromLabel": "起始时间",
"toLabel": "结束时间'",
"customRangeLabel": "自定义",
"weekLabel": "W",
"daysOfWeek": ["日", "一", "二", "三", "四", "五", "六"],
"monthNames": ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
"firstDay": 1
};
//初始化显示当前时间
$('#daterange-btn span').html(moment().subtract('hours', 1).format('YYYY-MM-DD') + ' - ' + moment().format('YYYY-MM-DD'));
//日期控件初始化
$('#daterange-btn').daterangepicker(
{
'locale': locale,
showDropdowns:true,
autoApply:true,
//汉化按钮部分
ranges: {
'今日': [moment(), moment()],
'昨日': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'最近7日': [moment().subtract(6, 'days'), moment()],
'最近30日': [moment().subtract(29, 'days'), moment()],
'本月': [moment().startOf('month'), moment().endOf('month')],
'上月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
},
startDate: moment(),
endDate: moment(),
minDate:'2000-01-01',
maxDate:moment(),
},
function (start, end) {
$('#daterange-btn span').html(start.format('YYYY-MM-DD') + ' - ' + end.format('YYYY-MM-DD'));
}
);
};
$(document).ready(function() {
init(); });
</script>
</body>
</html>

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

快速上手日期插件daterangepicker的更多相关文章

  1. 快速上手日期插件laydate

    1.laydate 这款插件有独立版的,也有作为layui模块的,两种使用方式差不多,就引入有区别而已 <!--这是作为模块使用--><!DOCTYPE html> <h ...

  2. js插件---bootstrap插件daterangepicker是什么

    js插件---bootstrap插件daterangepicker是什么 一.总结 一句话总结:日期段选择插件,也可选择日期 日期段选择插件,也可选择日期 1.daterangepicker 控件如何 ...

  3. intellij idea 13&14 插件推荐及快速上手建议 (已更新!)

    原文:intellij idea 13&14 插件推荐及快速上手建议 (已更新!) 早些年 在外企的时候,公司用的是intellij idea ,当时也是从eclipse.MyEclipse转 ...

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

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

  5. 【Python五篇慢慢弹】快速上手学python

    快速上手学python 作者:白宁超 2016年10月4日19:59:39 摘要:python语言俨然不算新技术,七八年前甚至更早已有很多人研习,只是没有现在流行罢了.之所以当下如此盛行,我想肯定是多 ...

  6. 想要快速上手 Spring Boot?看这些教程就足够了!| 码云周刊第 81 期

    原文:https://blog.gitee.com/2018/08/19/weekly-81/ 想要快速上手 Spring Boot?看这些教程就足够了!| 码云周刊第 81 期 码云周刊 | 201 ...

  7. 一文快速上手Logstash

    原文地址:https://cloud.tencent.com/developer/article/1353068 Elasticsearch是当前主流的分布式大数据存储和搜索引擎,可以为用户提供强大的 ...

  8. 快速上手seajs——简单易用Seajs

    快速上手seajs——简单易用Seajs   原文  http://www.cnblogs.com/xjchenhao/p/4021775.html 主题 SeaJS 简易手册 http://yslo ...

  9. jsp日期插件My97DatePicker

    jsp日期插件My97DatePicker 强大的日期控件 使用方便简单 (2010-10-30 18:59:12) 转载▼ 标签: js javascript 日期插件 jsp it 分类: jqu ...

随机推荐

  1. _LightColor0将会是主要的directional light的颜色。

    LightMode是个非常重要的选项,因为它将决定该pass中光源的各变量的值.如果一个pass没有指定任何LightMode tag,那么我们就会得到上一个对象残留下来的光照值,这并不是我们想要的. ...

  2. [转]NDK编译库运行时报dlopen failed: cannot locate symbol "__exidx_end" 解决办法

    原文链接:http://blog.csdn.net/acm2008/article/details/41040015 当用NDK编译的库在运行加载时报如下错: dlopen("/data/d ...

  3. 怎样用jQuery拿到select中被选中的option的值

    1.首先要保证select中每一个option标签都有value属性: 2.jquery的写法 1 $('#sele').val()//这里假设select的id是sele,这样可以获取当前选中的op ...

  4. ubuntu下搭建android开发环境之超顺畅模拟器

    如果说android系统的卡,像耳边蚊子让人抓狂,那么android模拟器的卡,那就像午睡时的苍蝇.大概就是一样的恶心~~ 那么,这样的问题对于开发者肯定忍无可忍,我也一样,虽然我还没有入门,但我也一 ...

  5. SQL Compare数据库版本比较工具

    Red Gate系列文章: Red Gate系列之一 SQL Compare 10.4.8.87 Edition 数据库比较工具 完全破解+使用教程 Red Gate系列之二 SQL Source C ...

  6. css中的三种基本定位机制

    css中的三种基本定位机制 a.普通文档流 b.定位:相对定位 绝对定位 固定定位 c.浮动 1.普通流中,元素位置由文档顺序和元素性质决定,块级元素从上到下依次排列,框之间的垂直距离由框的垂直mar ...

  7. Spring5源码解析-论Spring DispatcherServlet的生命周期

    Spring Web框架架构的主要部分是DispatcherServlet.也就是本文中重点介绍的对象. 在本文的第一部分中,我们将看到基于Spring的DispatcherServlet的主要概念: ...

  8. Lua中“.”调用方法与“:”调用方法的区别

    Lua中“.”调用方法与“:”调用方法的区别:                                                                             ...

  9. 20、Semantic-UI之数据验证

    20.1 实现数据验证   在很多前端框架中都提供了数据验证的操作,比如jQuery的验证框架等,但是jQuery的验证框架js文件太多:在使用Semantic-UI框架的时候只需要导入semanti ...

  10. vsftpd安装与配置--研究tcp与防火墙

    vsftpd的配置文件 /etc/vsftpd/vsftpd.conf 主配置文件 /usr/sbin/vsftpd Vsftpd的主程序 /etc/rc.d/init.d/vsftpd 启动脚本 / ...