日期插件DataRangePicker的使用方法及相关设置_datarange和valueform一起用-CSDN博客

本文链接：https://blog.csdn.net/u011921996/article/details/77568797

本文介绍了DataRangePicker这款高效的日期选择插件，提供了简易的使用示例及下载链接。通过调整相关设置，可以自定义日期弹窗，满足个性化需求。详细配置参考指定网址。

摘要由CSDN通过智能技术生成

DataRangePicker时一款非常好用的日期选择插件，可以根据需要自由地改变设置。下边是我的一个demo，简单易懂。插件代码可在网上下载或者下载我的demo代码http://download.csdn.net/download/u011921996/9949755

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="data.css">
</head>
<body>
<div>
    <div >
        <div class="cont-3">
            <p>截止至2017-10-01</p>
            <input type="button" class="form-control" id="date-range2" value="变更统计周期">
        </div>
    </div>
</div>

<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="moment.min.js"></script>
<script type="text/javascript" src="jquery.daterangepicker.js"></script>
<script type="text/javascript" >
    // 日历
    $('#date-range2').dateRangePicker({
        format: 'YYYY-MM-DD',
        endDate: new Date(),
        showShortcuts: false,
        separator: '至',
        setValue: function(s,start,end) {
            $('.cont-3 > p').text(s);
//            next(start, end);  后续操作
        }
    });
</script>
</body>
</html>

下面贴出data.css

p{margin:0;padding:0;}

/*日历*/
.date-picker{width:170px;height:25px;padding:0;border:0;line-height:25px;padding-left:10px;font-size:12px;font-family:Arial;font-weight:bold;cursor:pointer;color:#303030;position:relative;z-index:2;}
.date-picker-wrapper{position:absolute;z-index:1;border:1px solid #bfbfbf;background-color:#fff;width:428px;padding:5px 12px;font-size:12px;line-height:20px;color:#aaa;font-family:Arial;box-shadow:3px 3px 10px rgba(0,0,0,0.5);}
.date-picker-wrapper.single-date{width:auto;}
.date-picker-wrapper.no-shortcuts{padding-bottom:12px;}
.date-picker-wrapper .footer{font-size:11px;padding-top:3px;}
.date-picker-wrapper b{color:#666;font-weight:700;}
.date-picker-wrapper a{color:rgb(107,180,214);text-decoration:underline;}
.date-picker-wrapper .month-name{text-transform:uppercase;}
.date-picker-wrapper .month-wrapper{border:1px solid #bfbfbf;border-radius:3px;background-color:#fff;padding:5px;cursor:default