先看一下一個簡單的區間時間區域選擇的實現：
需要引入的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 | 格式 |