如何在日期范围选择器中隐藏第二个日历？答案

【问题标题】：How to hide second calendar in date range picker?如何在日期范围选择器中隐藏第二个日历？
【发布时间】：2018-07-04 05:29:55
【问题描述】：

我使用日期范围选择器插件创建了一个演示，它运行良好。我需要隐藏第二个日历，然后单击文本框显示两个日历以结束选择日期范围统计。所以在这里我需要隐藏第二个日历并按照相同的功能使用单个日历。所以我怎么能不知道。我在谷歌上搜索了很多链接，但我无法成功。

下面我展示了我的 HTML 代码：

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />

<div>
  <input type="text" id="dates" name="dates" value="" />
</div>


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

<script type="text/javascript">
  $(function() {
    //$('input[name="dates"]').daterangepicker();

    var naArray = ["20180705", "20180706", "20180707", "20180708", "20180709", "20180710", "20180711", "20180712", "20180713"];

    function isDateAvailable(date) {
      return naArray.indexOf(date.format('YYYYMMDD')) > -1;
    }

    $('input[name="dates"]').daterangepicker({
      isInvalidDate: isDateAvailable,
      minDate: new Date()
    }, function(start, end, label) {

      for (var d = start._d; d <= end._d; d.setDate(d.getDate() + 1)) {
        var isValid = true;

        var formattedDate = d.getFullYear().toString() + pad((parseInt(d.getMonth()) + 1), 2).toString() + pad(d.getDate(), 2).toString();

        if (naArray.indexOf(formattedDate) > -1) {
          isValid = false;
          break;
        }
      }

      if (!isValid) {
        alert('Please select valid date range.');
        $('.cancelBtn').trigger('click');
      }
    });
  });

  function pad(str, max) {
    str = str.toString();
    return str.length < max ? pad("0" + str, max) : str;
  }
</script>

使用下面我在日历中附加了屏幕截图，看起来效果很好，但我想要单个日历。

enter image description here

我只想要一个日历。当用户单击开始到结束日期时，相同的主题也将与单个日历一起出现。

我曾尝试使用 CSS 进行隐藏，但当时我无法在下个月的选择日期中获得背景主题颜色。 Forex: 18-07-2018 to 03-08-2018 select then in the 01-08-2018 to 03-08-2018 in background color does not show and when I select start to end date in the 01 to 03 dates in鼠标悬停颜色也不来。

这里是我预期的屏幕截图。 enter image description here

【问题讨论】：

只是想确认..你需要具有日期范围功能的单个日历..意味着
@Rush.2707 表示当用户选择相同功能所需的开始到结束日期时。就像鼠标悬停和移动一样，背景颜色与屏幕截图中的颜色相同。所以单日历可以吗？？
@Rush.2707 我将使用预期的屏幕截图编辑我的问题。
@Rush.2707 有可能？？？
@Edit 你检查我的答案了吗？

标签： jquery css daterangepicker

【解决方案1】：

看起来不可能让daterangepicker 使用单个日历。

当你设置"singleDatePicker": true, 它不会给你可选择一系列日期，但您只能选择一个日期。

您可以生成您选择的各种配置并在此处查看预期结果：

http://www.daterangepicker.com/#config

【讨论】：

【解决方案2】：

如果任何解决方案都不起作用，请尝试 CSS

.calendar.right{
    display: none !important;
}

【讨论】：