daterangepicker雙日曆插件的使用

 

今天主要是因爲項目的須要，作了一個daterangepicker雙日曆插件，作出來的效果以下：

我的感受這個daterangepicker雙日曆插件很好用，而且實現起來也不是很麻煩，我是根據它的官方文檔去寫的，並將Bootstrap也整合進去了，daterangepicker.js下載  官方文檔下載

下面就開始詳細介紹我是怎麼實現的吧。

1.在頭部導入必要的js和css：

<link rel="stylesheet" type="text/css" media="all" href="${ctxStatic}/daterangepicker/daterangepicker.css" />

 

<script src="${ctxStatic}/daterangepicker/jquery-1.11.3.min.js"></script>
<script src="${ctxStatic}/daterangepicker/bootstrap.min.js"></script>
<script src="${ctxStatic}/daterangepicker/moment.js"></script>
<script src="${ctxStatic}/daterangepicker/daterangepicker.js"></script>

 

2.在body中寫div：

<div style="float:left">//隱藏做用域，用於將日曆選中的開始時間和結束時間傳到後臺
<input name="datetime[start]" type="hidden" value="${startTime}">
<input name="datetime[end]" type="hidden" value="${endTime}">
</div>

<div class="btn-group btn-group-sm" style="padding-right:0;">
<button style="width:240px" id="config-demo" class="btn btn-default daterange daterange-time" type="button"><span class="date-title">下單時間</span></button>//點擊按鈕顯示時間插件，並展現選中的時間段
<button class="btn btn-default btn-sm" type="button" onclick="clearTime(this)" placeholder="下單時間"><i class="fa fa-remove"></i></button>//點擊按鈕清空選中的時間段
</div>

 

3.編寫js函數：

<script type="text/javascript">
$(document).ready(function() {
$('.demo i').click(function() {
$(this).parent().find('input').click();
});

updateConfig();

function updateConfig() {
var options = {};

options.timePicker = true;

options.timePicker24Hour = true;

options.ranges = {
'今天': [moment().startOf('day'), moment()],
'一週內': [moment().subtract(6, 'days'), moment()],
'兩週內': [moment().subtract(13, 'days'), moment()],
'一月內': [moment().subtract(29, 'days'), moment()],
};
options.locale = {
direction: 'ltr',
format: 'YYYY-MM-DD HH:mm',
separator: ' 至 ',
applyLabel: '肯定',
cancelLabel: '取消',
fromLabel: 'From',
toLabel: 'To',
customRangeLabel: '日期範圍',
daysOfWeek: ['日', '一', '二', '三', '四', '五','六'],
monthNames: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
firstDay: 1
};

options.linkedCalendars = true;

options.autoUpdateInput = true;

options.showCustomRangeLabel = true;

$('#config-demo').daterangepicker(options, function(start, end, label) {
var elm = $("#config-demo");
var container =$(elm).parent().prev();
// console.log('New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')');
// alert(startc);
// alert(end.format('YYYY-MM-DD HH:mm'));
$(elm).find(".date-title").html(start.format('YYYY-MM-DD HH:mm') + " 至 " + end.format('YYYY-MM-DD HH:mm'));
container.find(":input:first").val(start.format('YYYY-MM-DD HH:mm'));
container.find(":input:last").val(end.format('YYYY-MM-DD HH:mm'));
});
}
});
function clearTime(obj){
$(obj).prev().html("<span class="date-title">" + $(obj).attr("placeholder") + "</span>");
$(obj).parent().prev().find("input").val("");
}
</script>

這樣寫好了全部的配置之後就能夠顯示了，大家要是遇到了什麼不懂的地方就問我，樂意解答！