Question

我使用此日期范围选择器组件：http://www.daterangepicker.com/，默认情况下，窗口小部件显示两个日历。我想只显示一个日历，并能够使用＆lt; ＆GT;选择开始日期和结束日期时选择下一个/上个月的按钮，即能够选择1月份的开始日期（仅显示1月份），然后通过点击＆gt;选择3月份的结束日期（仅显示3月份）。按钮。 singleDatePicker有一个选项：true，但这会禁用选择日期范围的功能。

Answer 1

我也有同样的问题但是通过添加一些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;
}

Answer 2

要删除以下日历的第二个日历的代码：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 */

Answer 3

您可以使用 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" />

Javascript日期范围选择器 - 范围选择的单个日历

3 个答案: