达维营-前端网网上很多关于daterangepicker的实例都是版本比较旧的，希望个实例能够帮助到你。官方文档见https://sensortower.github.io/daterangepicker/docs#customization
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="">
<title>daterangepicker Examples</title>
<link rel="stylesheet" href="https://sensortower.github.io/daterangepicker/style/vendor.css">
<link rel="stylesheet" href="https://sensortower.github.io/daterangepicker/style/daterangepicker.css">
<link rel="stylesheet" href="https://sensortower.github.io/daterangepicker/style/main.css">
</head>
<body class="examples">
<div class="top-padding"></div>
<section class="secondary-section">
<div class="container">
<h2 id="standalone-single">演示</h2>
<input class="daterangepicker-field">
</div>
</section>
<script src="https://sensortower.github.io/daterangepicker/scripts/vendor.js"></script>
<script src="https://sensortower.github.io/daterangepicker/scripts/daterangepicker.js"></script>
<script>
$(function () {
//初始化显示当前时间
// $('.daterangepicker-field').val(moment().subtract('hours', 1).format('YYYY-MM-DD') + ' - ' + moment().format('YYYY-MM-DD'));
$(".daterangepicker-field").daterangepicker({
minDate: moment().subtract(2, 'years'),
/*minDate: '2015-11-10', // mode defaults to inclusive
minDate: moment().subtract(2, 'years'),
minDate: ['2015-11-10', 'expanded'],
minDate: ['2015-11-10', 'exclusive'],
minDate: [null, 'exclusive'], // date*/
maxDate: moment().add(2, 'years'),
/* maxDate: '2015-11-10', // mode defaults to inclusive
maxDate: moment().add(2, 'years'),
maxDate: ['2015-11-10', 'expanded'],
maxDate: ['2015-11-10', 'exclusive'],
maxDate: [null, 'exclusive'], // date defaults to moment().subtract(2, 'years')*/
startDate: moment().subtract(1, 'year'),
/*startDate: new Date(),
startDate: '2015-11-10',
startDate: [2015, 11, 10],
startDate: 1449159600,
startDate: moment().subtract(1, 'week'),*/
endDate: moment().add(2, 'year'),
/* endDate: new Date(),
endDate: '2015-11-10',
endDate: [2015, 11, 10],
endDate: 1449159600,
endDate: moment().endOf('month'),
endDate: moment().add(1, 'week'),*/
//periods: String[],
single: false,
orientation: 'right',//orientation: ('left' | 'right')
opened: false,
expanded: true,
standalone: false,
hideWeekdays: false,
ranges: {
'今天': [moment(), moment()],
'本周': [moment().startOf('week'), moment().endOf('week')],
'上月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
'本月': [moment().startOf('month'), moment().endOf('month')],
'最近7日': [moment().subtract(6, 'days'), moment()],
'最近30天': [moment().subtract(29, 'days'), moment()],
'最近90天': [moment().subtract(89, 'days'), moment()],
'过去一年': [moment().subtract(1, 'year').add(1, 'day'), moment()],
'去年': [moment().subtract(1, 'year').startOf('year').add(1, 'day'), moment().subtract(1, 'year').endOf('year')],
'今年': [moment().startOf('year').add(1, 'day'), moment().endOf('year')],
'所有时间': 'all-time', // [minDate, maxDate]
'自定义': 'custom',
},
period: ('day' | 'week' | 'month' | 'quarter' | 'year'),
forceUpdate: false,
callback: function (startDate, endDate, period) {
var title = startDate.format('L') + ' – ' + endDate.format('L');
$(this).val(title);
console.log($(this).val())
}
});
})
</script>
</body>
</html>