bootstrap中日历范围选择插件daterangepicker的使用详解

daterangepicker是一个基于bootstrap的日期范围选择插件，可以简单、快速地进行日期选择与范围选择操作。下面将详细介绍daterangepicker的使用步骤：

1.引入daterangepicker的JS文件和CSS文件

在HTML头部引入daterangepicker的JS文件和CSS文件：

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>

2.设置日期范围选择器

在HTML中添加一个input标签，并给input标签设置一个id属性。

<input id="daterange" type="text" />

3.初始化日期范围选择器

在JavaScript中初始化daterangepicker插件，设置相关参数。

$(function() {
    $('input[name="daterange"]').daterangepicker({
        opens: 'left',  // 弹出层显示的方向
        startDate: moment().startOf('hour'),  // 范围的开始时间
        endDate: moment().startOf('hour').add(32, 'hour'),  // 范围的结束时间
        locale: {
            applyLabel: '确定',  // 确定按钮的文本
            cancelLabel: '取消',  // 取消按钮的文本
            format: 'YYYY-MM-DD',  // 选择的日期格式
            daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr','Sa'],  // 星期的缩写
            monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],  // 月份的名称
            firstDay: 1  // 一周的      天是星期几
        }
    }, function(start, end, label) {
        console.log("选择日期范围：" + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
    });
});

在上述代码中，opens参数指示弹出层显示在左边，startDate和endDate参数分别表示范围的开始时间和结束时间，locale参数设置语言和格式，第二个回调函数打印所选的日期范围。

4.获取选择的日期范围

在JavaScript中可以通过daterangepicker的val()方法获取选择的日期范围。

var datepickerValue = $('#daterange').data('daterangepicker');
console.log(datepickerValue.startDate.format('YYYY-MM-DD') + ' to ' + datepickerValue.endDate.format('YYYY-MM-DD'));

在上述代码中，首先通过data()方法获取datepicker的值，然后通过startDate和endDate分别获取选择的日期范围的起始时间和结束时间。

总之，daterangepicker是一个方便易用的日期范围选择插件，可以帮助我们快速、轻松地进行日期范围选择操作。