<!DOCTYPE html>
<html>
<head>
<title>date range picker</title>
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="daterangepicker.css">
<script src="jquery-2.2.3.min.js"></script>
<script src="moment.js"></script>
<script src="daterangepicker.js"></script>
</head>
<body>
<input type="text" name="daterangepicker">
<script>
$("input[name=daterangepicker]").daterangepicker({
singleDatePicker: true, //单个时间组件
// autoApply: true,
autoUpdateInput: true,
// alwaysShowCalendars: true,
locale: {
format: "YYYY-MM-DD",
separator: " 至 ",
applyLabel: "确认",
cancelLabel: "清空",
fromLabel: "开始时间",
toLabel: "结束时间",
customRangeLabel: "自定义",
},
startDate: defaultStartDate, //选中日期的开始时间
endDate: defaultEndDate, //选中日期的结束时间
maxDate: moment(), //可选择的最大日期
ranges: {
'近7天': [moment().subtract(7, 'days'), moment()],
'近15天': [moment().subtract(15, 'days'), moment()],
'这个月': [moment().subtract(30, 'days'), moment()],
'上个月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
}
}).on("apply.daterangepicker", function(ev, picker){ //日期选择完成后执行的事件
var startTime = picker.startDate.format('YYYY-MM-DD'); //选中的日期开始时间
var endTime = picker.endDate.format('YYYY-MM-DD'); //选中的日期结束时间
}).on('cancel.daterangepicker', function(ev, picker) {
$("#date2").val("请选择日期范围");
$("#startTime").val("");
$("#endTime").val("");
})
</script>
</body>
</html>
效果图: