我使用此日期范围选择器组件:http://www.daterangepicker.com/,默认情况下,窗口小部件显示两个日历。我想只显示一个日历,并能够使用< >选择开始日期和结束日期时选择下一个/上个月的按钮,即能够选择1月份的开始日期(仅显示1月份),然后通过点击>选择3月份的结束日期(仅显示3月份)。按钮。 singleDatePicker有一个选项:true,但这会禁用选择日期范围的功能。
答案 0 :(得分:2)
我也有同样的问题但是通过添加一些css来克服它,希望它也能帮助你。
.drp-calendar.right thead>tr:nth-child(2) {
display: none;
}
.drp-calendar.right tbody {
display: none;
}
.daterangepicker.ltr .ranges, .daterangepicker.ltr .drp-calendar {
float: none !important;
}
.daterangepicker .drp-calendar.right .daterangepicker_input {
position: absolute;
top: 45px;
left: 8px;
width: 230px;
}
.drp-calendar.left .drp-calendar-table {
margin-top: 45px;
}
答案 1 :(得分:1)
要删除以下日历的第二个日历的代码:http://www.daterangepicker.com 将能够在一个日历中选择一个日期范围。
/* REMOVE SECOND CALENDAR */
.daterangepicker .drp-calendar.right {
position: absolute !important;
right: 0 !important;
top: 0 !important;
}
.daterangepicker .drp-calendar.right tbody {
display: none !important;
}
.daterangepicker .drp-calendar.right thead > tr:nth-child(2) {
display: none !important;
}
.daterangepicker .drp-calendar.right th.month {
display: none !important;
}
.daterangepicker .drp-calendar.right .calendar-table {
background: transparent !important;
}
.daterangepicker .daterangepicker.ltr .ranges, .daterangepicker.ltr .drp-calendar {
float: none !important;
}
.daterangepicker .drp-calendar.right .daterangepicker_input {
position: absolute !important;
}
/* REMOVE SECOND CALENDAR */
答案 2 :(得分:1)
您可以使用 hack 在一个日历中启用范围选择:
要仅插入一个日历并且运行良好,您必须隐藏第二个日历:
$(function() {
$('input[name="daterange"]').daterangepicker({
"autoapply": true
});
$('.drp-calendar.right').hide();
$('.drp-calendar.left').addClass('single');
});
现在我们遇到了一个问题...总是点击日历,“视图”将被更新,因此要显示下个月的箭头,您必须添加以下代码:
$('.calendar.table').on('DOMSubtreeModified', function() {
var el = $(".prev.available").parent().children().last();
if(el.hasClass('next available')) { return; }
el.addClass('next available');
el.append('<span></span>');
});
注意:可能有更好的方法,但这是我找到的方法。
$(function() {
$('input[name="daterange"]').daterangepicker({
"autoapply": true
});
$('.drp-calendar.right').hide();
$('.drp-calendar.left').addClass('single');
$('.calendar-table').on('DOMSubtreeModified', function() {
var el = $(".prev.available").parent().children().last();
if (el.hasClass('next available')) {
return;
}
el.addClass('next available');
el.append('<span></span>');
});
});
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<input type="text" name="daterange" value="01/01/2018 - 01/15/2018" />