Question

我使用日期范围选择器插件创建了一个演示，并且运行正常。我需要隐藏第二个日历，然后单击文本框以显示两个日历，以选择日期范围统计信息结束。因此，在这里，我需要隐藏第二个日历，并根据需要使用单个日历。所以我怎么不知道我在Google上搜索了许多链接，但无法获得成功。

在下面，我显示了我的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隐藏，但是那时我不能在下个月的选择日期获得背景主题颜色。外汇：18-07-2018至03-08-2018选择然后在01-08-2018至03-08-2018中不显示背景色，当我在01至03日期中选择开始至结束日期时鼠标悬停颜色也不会出现。

此处是我期望的屏幕截图。 enter image description here

Answer 1

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

设置"singleDatePicker": true,不会给您选择日期范围的选项，但您只能选择一个日期。

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

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

Answer 2

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

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

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

2 个答案: