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

Question

我正在尝试实现一个显示日历的按钮。来自here .当我在一个空文件中执行它并加载它时，它可以工作，但是当我尝试与我的代码混合时，什么也没有出现。 该按钮位于一个下拉菜单中，该菜单还有两个按钮:“Categoria”和“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>

我错过了什么吗？ 我有这个错误:

Uncaught TypeError: $(...).daterangepicker is not a function at HTMLInputElement. (Feeds:226) at HTMLInputElement.dispatch (jquery.min.js:3) at HTMLInputElement.q.handle (jquery.min.js:3) (anonymous) @ Feeds:226 dispatch @ jquery.min.js:3 q.handle @ jquery.min.js:3

Answer 1

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

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