Bootstrap日期插件daterangepicker使用详解

介绍

Daterangepicker是一个Bootstrap风格的日期范围选择器插件。它可以让用户直接在页面上快速选择时间段，而不需要手动输入。它可以与Moment.js和jQuery结合起来使用。本篇攻略将介绍如何使用Daterangepicker插件进行日期范围选择。

步骤

1.获取插件

在使用Daterangepicker之前，我们需要先获取该插件。我们可以在GitHub上找到Daterangepicker插件并下载它，或者使用npm包管理器进行安装。

npm install daterangepicker

2.引入插件

在HTML文件中，我们需要引入Daterangepicker插件的CSS和JavaScript文件。我们可以使用CDN来引入它们，也可以在本地下载后进行引入。

<!-- 载入Bootstrap和Daterangepicker的CSS文件 -->
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />

<!-- 载入jQuery和Moment.js库以及Daterangepicker的脚本文件 -->
<script src="//cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="//cdn.bootcss.com/moment.js/2.15.1/moment.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>

3.初始化插件

在引入Daterangepicker插件的JS文件之后，我们需要调用它的daterangepicker()方法来初始化它。

$(function() {
    $('input[name="daterange"]').daterangepicker();
});

在上述代码中，我们选择了一个名为“daterange”的input元素，并绑定了Daterangepicker插件。这样，当用户在该input中选择一个日期范围时，它就会弹出一个日期选择器。

Daterangepicker还有很多其他的配置选项。下面介绍其中的一些。

4.配置选项

startDate, endDate

通过设置startDate和endDate来设置日期选择器的起始和结束日期。这些选项应该是Moment.js对象。

$(function() {
    $('input[name="daterange"]').daterangepicker({
        startDate: moment().subtract(7, 'days'),
        endDate: moment()
    });
});

上面的代码将日期范围设置为从七天前到今天。

minDate, maxDate

通过设置minDate和maxDate来限制用户选择的日期范围。这些选项应该是Moment.js对象。

$(function() {
    $('input[name="daterange"]').daterangepicker({
        minDate: '01/01/2016',
        maxDate: '12/31/2016'
    });
});

上面的代码将限制用户的选择范围为2016年的1月1日至12月31日。

dateLimit

通过设置dateLimit来限制用户选择的日期范围的最大时间跨度。

$(function() {
    $('input[name="daterange"]').daterangepicker({
        dateLimit: {
            days: 7
        }
    });
});

上面的代码将限制用户选择的时间跨度为七天。

5.示例说明

以下是两个使用Daterangepicker插件的示例说明。

示例1

<div class="form-group">
    <label for="daterange">请选择日期范围：</label>
    <input type="text" name="daterange" class="form-control" />
</div>

<script>
$(function() {
    $('input[name="daterange"]').daterangepicker({
        opens: 'left', // 弹出日期选择器的位置
        startDate: moment().subtract(14, 'days'),
        endDate: moment(),
        minDate: '01/01/2016',
        maxDate: '12/31/2016',
        dateLimit: {
            days: 31
        },
        locale: { // 语言本地化
            format: 'MM/DD/YYYY',
            applyLabel: '确定',
            cancelLabel: '取消',
            fromLabel: '从',
            toLabel: '到',
            customRangeLabel: '自定义',
            weekLabel: '周',
            daysOfWeek: moment.weekdaysMin(),
            monthNames: moment.monthsShort(),
            firstDay: moment.localeData().firstDayOfWeek()
        },
        ranges: { // 快速选择范围
            '最近7天': [moment().subtract(6, 'days'), moment()],
            '最近30天': [moment().subtract(29, 'days'), moment()],
            '本月': [moment().startOf('month'), moment().endOf('month')],
            '上个月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
        }
    });
});
</script>

上面的代码将创建一个日期范围选择器，用户可以选择任意一个时间段，最大时间跨度为31天，并且有四个快速选择范围：最近7天、最近30天、本月、上个月。选择的起始日期和结束日期会自动填充到input元素中。

示例2

<div class="input-group">
    <input type="text" class="form-control" name="birthdate" value="10/24/1984" />
    <div class="input-group-addon">
        <span class="glyphicon glyphicon-calendar"></span>
    </div>
</div>

<script>
$(function() {
    $('input[name="birthdate"]').daterangepicker({
        singleDatePicker: true, // 单个日期选择器
        showDropdowns: true, // 显示年份和月份下拉列表
        minYear: 1900,
        maxYear: moment().year() - 18, // 最大年龄为18岁
        autoApply: true,
        locale: { // 语言本地化
            format: 'MM/DD/YYYY',
            applyLabel: '确定',
            cancelLabel: '取消',
            fromLabel: 'From',
            toLabel: 'To',
            customRangeLabel: 'Custom',
            weekLabel: 'W',
            daysOfWeek: moment.weekdaysMin(),
            monthNames: moment.monthsShort(),
            firstDay: moment.localeData().firstDayOfWeek()
        }
    });
});
</script>

上述代码将创建一个单个日期选择器，格式为“月/日/年”，用户不能选择18岁以下的日期。在右侧有一个日历图标，用户单击时会弹出日期选择器。