先看一下一个简单的区间时间区域选择的实现：
需要引入的css
<link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../plugins/daterangepicker/daterangepicker.css">
引入的js
<script src="../plugins/jQuery/jquery-1.12.4.min.js"></script>
<script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="../plugins/daterangepicker/moment.min.js"></script>
<script src="../plugins/daterangepicker/daterangepicker.js"></script>
完整的代码：
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta charset="UTF-8" />
<title>A date range picker for Bootstrap</title>
<link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../plugins/daterangepicker/daterangepicker.css">
<script src="../plugins/jQuery/jquery-1.12.4.min.js"></script>
<script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="../plugins/daterangepicker/moment.min.js"></script>
<script src="../plugins/daterangepicker/daterangepicker.js"></script>
</head>
<body style="margin: 60px 0">
<div class="row">
<div class="col-md-4 col-md-offset-2 demo">
<h4>Your Date Range Picker</h4>
<input type="text" id="config-demo" class="form-control">
<i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
</div>
</div>
<style type="text/css">
.demo {
position: relative;
}
.demo i {
position: absolute;
bottom: 10px;
right: 24px;
top: auto;
cursor: pointer;
}
</style>
<script type="text/javascript">
var beginTimeStore = '';
var endTimeStore = '';
$('#config-demo').daterangepicker({
"timePicker": true,
"timePicker24Hour": true,
"linkedCalendars": false,
"autoUpdateInput": false,
"locale": {
format: 'YYYY-MM-DD',
separator: ' ~ ',
applyLabel: "应用",
cancelLabel: "取消",
resetLabel: "重置",
}
}, function(start, end, label) {
beginTimeStore = start;
endTimeStore = end;
console.log(this.startDate.format(this.locale.format));
console.log(this.endDate.format(this.locale.format));
if(!this.startDate){
this.element.val('');
}else{
this.element.val(this.startDate.format(this.locale.format) + this.locale.separator + this.endDate.format(this.locale.format));
}
});
</script>
</body>
</html>
下面是参数配置
| 参数 | 格式 | 示例 | 含义 |
|---|---|---|---|
| startDate | MM/DD/YYYY | “startDate”:”10/14/2017” | 设置默认的开始日期 |
| endDate | MM/DD/YYYY | “endDate”:”10/22/2017” | 设置默认的结束日期 |
| minDate | MM/DD/YYYY | “minDate”:”10/14/1995” | 设置最小可用日期 |
| maxDate | MM/DD/YYYY | “maxDate”:”10/14/2017” | 设置最大可用日期 |
| autoApply | true/false | 默认值：false | 不用点击Apply或者应用按钮就可以直接取得选中的日期 |
| singleDatePicker | true/false | 默认值：false | 设置为单个的datepicker，而不是有区间的datepicker |
| singleDatePicker | true/false | 默认值：false | 设置为单个的datepicker，而不是有区间的datepicker |
| showDropdowns | true/false | 默认值：false | 当设置值为true的时候，允许年份和月份通过下拉框的形式选择 |
| timePicker | true/false | 默认值：false | 可选中时分 |
| timePicker24Hour | true/false | 默认值：false | 设置小时为24小时制 |
| timePickerSeconds | true/false | 默认值：false | 可选中秒 |
| opens | 可选值：right left center | 默认值：center | 设置datepicker面板防止的位置：左边、右边或者中间 |
| drops | 可选值：down up | 默认值：down | 设置面板防止的位置：input输入框上面或者input输入框下面 |
| locale | 本地配置 | ||
| locale.applyLabel | 确认按钮文字 | ||
| locale.cancelLabel | 取消按钮文字 | ||
| locale.format | 格式 |