问日期范围选取器-显示日历

EN

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