Question

我正在尝试实现一个使日历显示的按钮。来自here。当我在一个空文件中加载它时，它可以工作，但是当我尝试与我的代码混合时，什么也没有出现。该按钮位于带有两个其他按钮的下拉菜单中：“类别”和“ Nome”，单击后将为每个按钮显示一个搜索/过滤器框。

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

                <div class="dropDown">
                <button onclick="dropDown()" class="dropBtn">Filtro</button>
                <div id="myDropDown" class="dropDown-content">
                      <button onclick="containCatText()" class="catbtn">Categoria</button>
                        <div id="myDropdownCat" class="catdown-content">
                            <input type="text" placeholder="Procurar.." id="myInput" onkeyup="filterFunction()">
                        </div>
                      <button onclick="calendar()" class="calbtn">Date</button>
                        <div id="myCal" class="cal-content">
                          <input type="text" name="daterange" value="01/01/2018 - 01/15/2018" />
                        </div>
                        <script>
                          $(function containText() {
                            $('input[name="daterange"]').daterangepicker({
                              opens: 'left'
                            }, function(start, end, label) {
                              console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
                            });
                          });

                          function calendar() {
                            $('input[name="daterange"]').focus();
                          }

                        </script>
                      <button onclick="containNamText()" class="nambtn">Nome</button>
                        <div id="myDropdownNam" class="namdown-content">
                            <input type="text" placeholder="Procurar.." id="myInput" onkeyup="filterFunction()">
                        </div>
                </div>
            </div>
            </div>
            <script>
            function containCatText() {
                document.getElementById("myDropdownCat").classList.toggle("show");
            }
            function containNamText() {
                document.getElementById("myDropdownNam").classList.toggle("show");
            }
            window.onclick = function(event) {
                if (!event.target.matches('.catbtn')) {
                    var dropdowns = document.getElementsByClassName("catdown-content");
                    var i;
                    for (i = 0; i < dropdowns.length; i++) {
                        var openDropdown = dropdowns[i];
                        if (openDropdown.classList.contains('show')) {
                            openDropdown.classList.remove('show');
                        }
                    }
                }
                else if (!event.target.matches('.nambtn')) {
                    var dropdowns1 = document.getElementsByClassName("namdown-content");
                    var i;
                    for (i = 0; i < dropdowns.length; i++) {
                        var openDropdown = dropdowns[i];
                        if (openDropdown.classList.contains('show')) {
                            openDropdown.classList.remove('show');
                        }
                    }
                }
            }
            </script>
            <script>
            function dropDown() {
                document.getElementById("myDropDown").classList.toggle("Show");
            }
            </script>

我想念什么吗？我遇到此错误：

未捕获的TypeError：$（...）。daterangepicker不是函数在HTMLInputElement。（馈送：226）在HTMLInputElement.dispatch（jquery.min.js：3）在HTMLInputElement.q.handle（jquery.min.js：3）（匿名）@ Feeds：226派发@ jquery.min.js：3 q.handle @ jquery.min.js：3

Answer 1

您可以使用jQuery trigger事件，如下所示：

$('.calbtn').on('click', function() {
   $('input[name="daterange"]').trigger('click');
});

有关更多信息，请参见jQuery docs。

Answer 2

首先，将初始化代码放置在click事件中，因此需要将其移到函数之外。由于似乎没有其他方法，因此您需要通过聚焦来模仿输入按键

<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" />

<button onclick="calendar()" class="calbtn">Date</button>
<div id="myCal" class="cal-content">
  <input type="text" name="daterange" value="01/01/2018 - 01/15/2018" />
</div>
<script>
  $(function containText() {
    $('input[name="daterange"]').daterangepicker({
      opens: 'left'
    }, function(start, end, label) {
      console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
    });
  });

  function calendar() {
    $('input[name="daterange"]').focus();
  }

</script>

日期范围选择器-显示日历

2 个答案: