daterangepicker是bootstrap的一个日历插件 主要用来选择时间段的插件 这个插件很好用 也很容易操作
引入相关插件
<!-- 需要引用的依赖库 -->
[removed][removed]
[removed][removed]
<link rel="stylesheet"
Bootstrap中的daterangepicker是一款非常实用的日历插件，主要用于在网页上选择日期范围，适用于各种需要时间区间选择的应用场景，如预约、报告筛选等。这款插件简单易用，且具有丰富的自定义功能。
使用daterangepicker需要引入必要的依赖库。在HTML文件中，你需要包含jQuery、Moment.js和daterangepicker的CSS及JS文件。这些库可以从CDN快速加载，如下所示：
```html
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/bootstrap/3/css/bootstrap.css" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />
```
接下来，要在页面中使用daterangepicker，你需要在HTML中添加一个input元素，并指定name属性，例如`<input name="daterange">`。然后，通过JavaScript调用daterangepicker方法，如下所示：
```javascript
$('input[name="daterange"]').daterangepicker();
```
daterangepicker提供了丰富的配置项，允许你定制日期选择器的行为和外观。例如，你可以设置日期格式、默认选择的日期范围，以及回调函数等。下面是一个配置示例：
```javascript
$('input[name="daterange"]').daterangepicker({
locale: {
format: 'YYYY-MM-DD',
startDate: '2013-01-01',
endDate: '2013-12-31'
},
function(start, end, label) {
alert("A new date range was chosen: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
}
});
```
在上述代码中，`locale`对象用于设置日期和时间的显示格式，以及语言相关的选项。`startDate`和`endDate`指定了默认的日期范围。回调函数会在用户选择新的日期范围后执行，参数包括开始日期、结束日期和标签。
除了基本配置，daterangepicker还支持更多的高级选项，比如设置最小和最大可选日期（`minDate`和`maxDate`）、是否显示下拉选择小时和分钟（`timePicker`和`timePickerIncrement`），以及日期选择框的弹出位置（`opens`）等。
此外，你还可以将配置选项封装到一个单独的对象中，然后在调用daterangepicker时传入，这样可以提高代码的可读性和复用性。例如：
```javascript
var dateLongRangePickerOptionObj = {
// ... 配置选项 ...
};
$('input[name=dateStr]', '#themeAddPage').daterangepicker(dateLongRangePickerOptionObj);
```
Bootstrap的daterangepicker插件是一个强大而灵活的日期范围选择工具，它提供了丰富的配置选项，可以满足各种复杂的需求。通过熟练掌握它的使用，开发者可以轻松地在项目中实现美观且功能强大的日期选择功能。
