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;position:relative;_overflow:hidden;}
.date-picker-wrapper .month-wrapper table{width:190px;float:left;}
.date-picker-wrapper .month-wrapper table.month2{width:190px;float:right;}
.date-picker-wrapper .month-wrapper table th,.date-picker-wrapper .month-wrapper table td{vertical-align:middle;text-align:center;line-height:14px;margin:0px;padding:0px;}
.date-picker-wrapper .month-wrapper table .day{height:19px;line-height:19px;font-size:12px;margin-bottom:1px;color:#999;cursor:default;}
.date-picker-wrapper .month-wrapper table div.day.lastMonth,.date-picker-wrapper .month-wrapper table div.day.nextMonth{color:#999;cursor:default;}
.date-picker-wrapper .month-wrapper table .day.checked{background-color:#4479cf;}
.date-picker-wrapper .month-wrapper table .week-name{height:20px;line-height:20px;font-weight:100;text-transform:uppercase;}
.date-picker-wrapper .month-wrapper table .day.has-tooltip{cursor:help!important;}
.date-picker-wrapper .month-wrapper table .day.toMonth.valid{color:#333;cursor:pointer;}
.date-picker-wrapper .month-wrapper table .day.real-today{background-color:rgb(255,230,132);}
.date-picker-wrapper .month-wrapper table .day.real-today.checked{background-color:rgb(112,204,213);}
.date-picker-wrapper table .caption{height:40px;}
.date-picker-wrapper table .caption .next,.date-picker-wrapper table .caption .prev{padding:0 5px;cursor:pointer;}
.date-picker-wrapper table .caption .next:hover,.date-picker-wrapper table .caption .prev:hover{background-color:#ccc;color:white;}
.date-picker-wrapper .gap{position:absolute;display:none;top:0px;left:204px;z-index:1;width:15px;height:100%;background-color:red;font-size:0;line-height:0;}
.date-picker-wrapper .gap .gap-lines{height:100%;overflow:hidden;}
.date-picker-wrapper .gap .gap-line{height:15px;width:15px;position:relative;}
.date-picker-wrapper .gap .gap-line .gap-1{z-index:1;height:0;border-left:8px solid white;border-top:8px solid #eee;border-bottom:8px solid #eee;}
.date-picker-wrapper .gap .gap-line .gap-2{position:absolute;right:0;top:0px;z-index:2;height:0;border-left:8px solid transparent;border-top:8px solid white;}
.date-picker-wrapper .gap .gap-line .gap-3{position:absolute;right:0;top:8px;z-index:2;height:0;border-left:8px solid transparent;border-bottom:8px solid white;}
.date-picker-wrapper .gap .gap-top-mask{width:6px;height:1px;position:absolute;top:-1px;left:1px;background-color:#eee;z-index:3;}
.date-picker-wrapper .gap .gap-bottom-mask{width:6px;height:1px;position:absolute;bottom:-1px;left:7px;background-color:#eee;z-index:3;}
.date-picker-wrapper .selected-days{display:none;}
.date-picker-wrapper .drp_top-bar{line-height:40px;height:40px;position:relative;}
.date-picker-wrapper .drp_top-bar .error-top{display:none;}
.date-picker-wrapper .drp_top-bar .normal-top{display:none;}
.date-picker-wrapper .drp_top-bar .default-top{display:block;}
.date-picker-wrapper .drp_top-bar.error .default-top{display:none;}
.date-picker-wrapper .drp_top-bar.error .error-top{display:block;color:red;}
.date-picker-wrapper .drp_top-bar.normal .default-top{display:none;}
.date-picker-wrapper .drp_top-bar.normal .normal-top{display:block;}
.date-picker-wrapper .drp_top-bar .apply-btn{position:absolute;right:0px;top:6px;padding:3px 5px;margin:0;font-size:12px;border-radius:4px;cursor:pointer;color:#d9eef7;border:solid 1px #0076a3;background:#4479cf;}
/*time styling*/
.time{position:relative;}
.time input[type=range]{vertical-align:middle;}
.time1,.time2{width:180px;padding:0 5px;text-align:center;}
.time1{float:left;}
.time2{float:right;}
.hour,.minute{text-align:right;}
.hide{display:none;}
/*.date-picker-wrapper{background:#fff;}*/
#date-range2{cursor:pointer;display:block;float:left;font-size:16px;background:#fff url(selectdata.png) no-repeat 6% center;color:#7f7f7f;padding-left:40px;padding-right:22px;line-height:38px;border:1px solid #d7d7d7;border-radius:5px;}
.date-picker-wrapper .month-wrapper table.month1{border:1px solid #ddd;width:200px;}
.date-picker-wrapper .month-wrapper table.month2{border:1px solid #ddd;width:200px;}
.date-picker-wrapper table .caption{background:#f5f5f5;}
.date-picker-wrapper .month-wrapper table .day.real-today.checked{background:#4479cf;}
.cont-3{width:455px;margin:24px auto;overflow:hidden;}
.cont-3 >p{font-size:20px;float:left;line-height:38px;text-align:center;padding-right:12px;min-width:260px;}
.date-picker-wrapper .drp_top-bar .apply-btn.disabled,.date-picker-wrapper .drp_top-bar .apply-btn{width:89px;height:30px;line-height:30px;text-align:center;padding:0;color:#fff;background:#4479cf;border:1px solid #4479cf;}
.date-picker-wrapper .drp_top-bar .default-top{color:#666666;}
.date-picker-wrapper{margin-left:349px;}
.date-picker-wrapper .month-name{color:#666666;}
.four-list{overflow:hidden;}
.four-list >div{float:left;width:22%;height:140px;border-radius:10px;border:1px solid #b9d9fc;margin-right:40px;background:#fff;}
.four-list >div>h3{font-size:62px;font-weight:bold;line-height:70px;padding-top:18px;text-align:center}
.font-color1{color:#a97eec}
.font-color2{color:#fd8f24}
.font-color3{color:#fd7343}
.font-color4{color:#00aeff}
.font-color5{color:#25d498}
.four-list >div>p{font-size:20px;color:#888888;line-height:26px;text-align:center}
.four-list .last{margin-right:0;}
最后的结果图如下
如果你想对日期弹框做更多的修改，相关设置如下（参考http://cdn.asilu.com/jquery/daterangepicker/index.html）
format (String)
用于矩的日期格式字符串。
单击 此处 查看文档
separator (String)
日期字符串之间的分隔符字符串
language (String)
预先定义的语言是 'en' 和 'cn'，你可以定义你自己的语言
语言然后把这个设置为新语言的名称。
您还可以将此设置为 'auto'，以使其自动检测到浏览器语言。
startOfWeek (String)
"sunday" 或 "monday"
getValue (Function)
这个函数被调用时，把日期范围内的字符串从DOM
当它被调用时，该函数的上下文设置为 DatePicker DOM DEMO
setValue (Function)
这个函数被调用时设置日期范围字符串 DOM DEMO
startDate (String or false)
定义允许用户使用的最 早 的日期 `format` DEMO
endDate (String or false)
定义允许用户使用的最 晚 的日期 `format`
minDays (Number)
此号码定义选定范围内的最小天数
如果是0，意味着不限制最少天数
maxDays (Number)
此号码定义选定范围内的最大天数
如果是0，意味着不限制最大天数
showShortcuts (Boolean)
隐藏或显示快捷键区域
shortcuts (Object)
定义快捷键。有一些内置的快捷方式，见源代码
time (Object)
如果启用了添加时间选择控件。
customShortcuts (Array)
定义自定义快捷按钮。见 demo.js
inline (Boolean)
是否在代替覆盖模式内联模式呈现的日期范围选择器DOM
如果设置为真，请设置 'container'
container (String, css selector || DOM Object)
日期范围选择器DOM 选择的值应用到哪里
alwaysOpen (Boolean)
如果你使用内联的模式，你可能想要的日期范围选择器控件是renderred加载页时
设置此为真，也将隐藏 'close' 按钮
singleDate (Boolean)
选择一个日期，而不是日期范围。如果 'singleMonth' 选项设置为 true
它会显示只有一个月，而不是2个月
batchMode (false / 'week' / 'month')
自动处理选择模式
假（默认），周，月，周，月范围auto batch select mode
false / 'week' / 'month', week-range, month-range
beforeShowDay (Function)
一个函数，以日期为参数，并且必须返回一个数组：
[0]：真/假，说明该日期是否可选择
[1]：一个CSS类名称添加到日期 或 '' 为默认的显示
[2]：这个日期的一个可选的弹出提示
该功能被称为每天在DatePicker显示之前。
stickyMonths (Boolean)
如果 true, 两个月份紧靠， 单击下一个月会改变两个月份
此设置将如果 singledate 选项设置为 true 的没有效果
singleMonth (Boolean || 'auto') Default value: 'auto'
如果是真的，它只显示一个月，而不是2个月。您可以选择日期范围
在一个月的时间里。如果这是设置为 'auto'，它将改变为真实，如果屏幕宽度低于 480。
showDateFilter ( Function(Int time, Int date) )
在日历中创建每个日期元素时，这是一个回调函数。第一个参数是当天的时间戳。第二个参数将是当月日期。
customTopBar ( Function || String)
如果您设置该参数，将在顶部栏中使用该值。
extraClass (String)
设置额外的类名称日期范围选择器DOM
showTopbar (Boolean)
是否显示顶部栏。
swapTime (Boolean)
如果是 true，如果时间允许，选择第一个结束日期比开始日期，结束时间和开始时间将交换。
如果是 false，只有日期将被交换，时间将保持不变。
如果禁用，此配置键不使用。
selectForward (Boolean) Default: false
如果 true，你只能在第一次选择 后 的日期内选择第二次
selectBackward (Boolean) Default: false
如果 true，你只能在第一次选择 前 的日期内选择第二次
showWeekNumbers (Boolean) Default: false
如果 true，显示周数
getWeekNumber (Function( Date object ) )
称为生成周数的函数。
第一个参数将是一周的第一天 DEMO下面是js触发事件
$('#dom-id')
.dateRangePicker()
.bind('datepicker-first-date-selected', function(event, obj)
{
/* 此事件 在第一次选择时触发 */
console.log(obj);
// 返回对象类似
// {
// date1: (Date object of the earlier date)
// }
})
.bind('datepicker-change',function(event,obj)
{
/* 此事件 在第二次选择时触发 */
console.log(obj);
// obj will be something like this:
// {
// date1: (Date object of the earlier date),
// date2: (Date object of the later date),
// value: "2013-06-05 to 2013-06-07"
// }
})
.bind('datepicker-apply',function(event,obj)
{
/* 此事件将在用户单击 应用 按钮时触发 */
console.log(obj);
})
.bind('datepicker-close',function()
{
/* 这个事件将日期范围选择器关闭之前触发 */
console.log('before close');
})
.bind('datepicker-closed',function()
{
/* 这个事件将日期范围选择器关闭后触发 */
console.log('after close');
})
.bind('datepicker-open',function()
{
/* 这个事件将日期范围选择器打开之前触发 */
console.log('before open');
})
.bind('datepicker-opened',function()
{
/* 这个事件将日期范围选择器打开后触发 */
console.log('after open');
})