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

Question

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

Answer 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 */

Answer 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;
}

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" />