$(function(){
$('.dateTimeRange').daterangepicker({
startDate: moment().subtract(7, 'days'),
endDate: moment().subtract(1, 'days'),
maxDate : moment(), //最大时间
dateLimit : {
days : 600
}, //起止时间的最大间隔
showDropdowns : true,
showWeekNumbers : false, //是否显示第几周
timePicker : false, //是否显示小时和分钟
timePickerIncrement : 10, //时间的增量,单位为分钟
timePicker12Hour : false, //是否使用12小时制来显示时间
ranges : {
'今日': [moment().startOf('day'), moment()],
'昨日': [moment().subtract('days', 1).startOf('day'), moment().subtract('days', 1).endOf('day')],
'最近7日': [moment().subtract('days', 7).startOf('day'), moment().subtract('days', 1).endOf('day')],
'最近30日': [moment().subtract('days',30).startOf('day'), moment().subtract('days', 1).endOf('day')]
},
opens : 'auto', //日期选择框的弹出位置
buttonClasses : [ 'btn btn-default' ],
applyClass : 'btn-small btn-primary blue',
cancelClass : 'btn-small',
format : 'YYYY-MM-DD HH:mm:ss', //控件中from和to 显示的日期格式
separator : ' to ',
"locale" : {
"format": 'YYYY-MM-DD',
applyLabel : '确定',
cancelLabel : '取消',
fromLabel : '起始时间',
toLabel : '结束时间',
customRangeLabel : '自定义',
daysOfWeek : [ '日', '一', '二', '三', '四', '五', '六' ],
monthNames : [ '一月', '二月', '三月', '四月', '五月', '六月','七月', '八月', '九月', '十月', '十一月', '十二月' ],
firstDay : 1
}
}, function(start, end, label) {//格式化日期显示框
$('#dateTimeRange span').html(start.format('YYYY-MM-DD') + ' - ' + end.format('YYYY-MM-DD'));
}
);
});
<div class="form-group" style="margin:5px 0;">
<div class="input-group">
<span class="input-group-addon"> <i class="fa fa-calendar"></i> </span>
<input type="text" style="width:200px" class="form-control dateTimeRange">
</div>
<!-- <label for="phone" class="col-md-2 control-label no-padding-right">日期:</label> -->
<!-- <div class="col-md-10"> -->
<!-- <div class="controls"> -->
<!-- <div id="reportrange" class="pull-left dateRange" style="width:200px"> -->
<!-- <i class="glyphicon glyphicon-calendar fa fa-calendar"></i> -->
<!-- <input id="searchDateRange" class="form-control"/> -->
<!-- <b class="caret"></b> -->
<!-- </div> -->
<!-- </div> -->
<!-- </div> -->
</div>