参数介绍：

参数 格式 示例 含义
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. Chrome谷歌浏览器屏蔽百度搜索右侧广告推荐方法

    先上图百度广告,其实屏蔽广告很简单 主要分成以下三步: 下载Adblock Plus插件 安装Adblock Plus插件 开启屏蔽 一.下载Adblock Plus插件(官网离线版) 二.安装Adb ...

  2. highchart 曲线图

    $(function() { Highcharts.setOptions({ global: { useUTC: false } }); var chart = new Highcharts.Char ...

  3. SLAM Course - WS13/14 by Cyrill Stachniss (1) 课程资源汇总

    本帖是作者学习SLAM 课程笔记的资源帖,汇总了SLAM Course - WS13/14 by Cyrill Stachniss 的相关资源. 1. 课程网站,有相关课件作业和教学视频下载. htt ...

  4. Python 解析配置模块之ConfigParser详解-乾颐堂

    1.基本的读取配置文件 -read(filename) 直接读取ini文件内容 -sections() 得到所有的section,并以列表的形式返回 -options(section) 得到该sect ...

  5. Auto Encoder

    对自编码器的理解: 对于给定的原始输入x,让网络自动找到一种编码方式(特征提取,原始数据的另一种表达),使其解码后的输出x'尽可能复现原始输入x. 知乎参考:https://www.zhihu.com ...

  6. JS实现windows.open打开窗口并居中

    function openWin() {            var url='Add.aspx';                             //转向网页的地址;           ...

  7. CodeForces 347B Fixed Points (水题)

    题意:给定 n 数,让你交换最多1次,求满足 ai = i的元素个数. 析:很简单么,只要暴力一遍就OK了,先把符合的扫出来,然后再想,最多只能交换一次,也就是说最多也就是加两个,然后一个的判,注意数 ...

  8. PHP 5.2 5.3 5.4 5.5 memcache dll扩展

    在windows下PHP5.2版本的memcache扩展dll文件好找,5.3的可能不是很好找,这里提供PHP5.2.5.3.5.4.5.5的php_memcache.dll扩展,需要的可以下载. 全 ...

  9. 回归(regression)、梯度下降(gradient descent)

    本文由LeftNotEasy所有,发布于http://leftnoteasy.cnblogs.com.如果转载,请注明出处,在未经作者同意下将本文用于商业用途,将追究其法律责任. 前言: 上次写过一篇 ...

  10. CALayer, CoreGraphics与CABasicAnimation介绍

    今天我们来看一下CALayer.CoreGraphics和CABasicAnimation.这些东西在处理界面绘制.动画效果上非常有用. 本篇博文就讲介绍CALayer的基本概念,使用CoreGrap ...