daterangepicker双日历插件的使用

2018/03/06 20:22
阅读数 59

 

今天主要是由于项目的需要,做了一个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>

这样写好了所有的配置以后就可以显示了,你们要是遇到了什么不懂的地方就问我,乐意解答!

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部