?

今天主要是由于項目的需要，做了一個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" οnclick="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>

這樣寫好了所有的配置以后就可以顯示了，你們要是遇到了什么不懂的地方就問我，樂意解答！

轉載于:https://www.cnblogs.com/gaopengfirst/p/8516539.html

總結

以上是生活随笔為你收集整理的daterangepicker双日历插件的使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。