javascript - 如何在另一个 Javascript 中实现 Bootstrap Datepicker？

Question

这简直让我发疯了!!!

我有一个生成 HTML 文件的 php 页面，其中有一些 javascript 函数可以触发一些选择和其他内容。其中一个 JS 还生成一个日期字段，我想在其中使用 Bootstrap Datepicker 插件。我无法让它工作，我不知道为什么，因为在包含相同 CSS 和 JS 的其他页面中它工作得很好......那么，我在这个页面中的错误是什么？ 请帮忙!

<?php

    session_start();

    require_once ("common/functions.php");

    if (!checkSession()) {
        header('Location: home.php');
        die();
    }

    dbConnect();

    printHeader("Aggiungi Magazzino e Preparazioni");

    printMenu($_SESSION['data']);

    echo "<center><div class='container'><p class='h3'>Aggiungi Magazzino e Preparazioni</p><br>";

    echo "<form method = 'POST' action='home_user.php'>";

    if ($_GET['type'] == "magazzino") {
        #code...
    else {
        $query = "SELECT Nome FROM Pietanza";
        $res = mysql_query ($query) or die ("Error: ".mysql_error());
        for ($j = 0; $result = mysql_fetch_assoc ($res); $j++) {
            $pietanze[$j] = $result['Nome'];
        }

        echo "<label for='nos'>Quante preparazioni vuoi aggiungere?</label>";
        echo "<select class='form-control' name='nos' onchange='addPreparations(this, ".json_encode($pietanze).");'>
                <option value=''>Selezionare...</option>";
                for ($i=1; $i<=15; $i++) {
                    echo "<option value='".$i."'>".$i."</option>";
                }
        echo "</select>";
    }
    echo "<span id='box_righe'></span>";

    echo "<input type='hidden' name='type' value='".$_GET['type']."'/></form>";

    echo "</div></center>";

?>

    <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
    <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
    <script src="js/bootstrap.js"></script>
    <script type="text/javascript" src="datepicker/js/bootstrap-datepicker.js"></script>

    <script type="text/javascript"> 
        function addPreparations (nos, pietanze) {
            var numeroTotale = nos.value;
            var box = document.getElementById("box_righe");
            if (numeroTotale == '') {
                box.innerHTML = '';
            }
            else {
                var righe = "<table class='table table-hover'>";
                righe += "<th class='text-center'>Pietanza</th><th class='text-center'>U. di Misura</th><th class='text-center'>Quantità</th><th class='text-center'>Data di Preparazione</th>";
                for (i = 1; i <= numeroTotale; i++) {
                    righe = righe + "<tr><td><select name='pietanza"+i+"' class='form-control' onchange='showMU(this.value, \"p\", "+i+");'>";
                    righe = righe + "<option value=''>Selezionare la pietanza "+i+"</option>";
                    for (j=0; j<pietanze.length; j++) {
                        righe = righe + "<option value='"+pietanze[j]+"'>"+pietanze[j]+"</option>";
                    }
                    righe = righe + "</select></td>";
                    righe = righe + "<td align='center'><p id='umis"+i+"' class='h5'>- - -</p></td>";
                    righe = righe + "<td align='center'><input type='number' placeholder='Inserire la quantità' id ='quantita' name='quantita"+i+"' class='form-control'/></td>";
                    righe = righe + "<td align='center'><input type='text' name='data"+i+"' class='datepicker'/></td></tr>";
                }
                righe = righe + "</table>";

                righe = righe + "<input type='submit' name='storageConfirm' value='Conferma' class='btn btn-success'/>&nbsp&nbsp";
                righe = righe + "<input type='reset' value='Reimposta' class='btn btn-danger'/>";

                box.innerHTML = righe;
            }
        }

        function showMU (str, type, current) {
            if (str == "") {
                document.getElementById("umis"+current).innerHTML = "";
                return;
            }
            else {
                if (window.XMLHttpRequest) {
                    xmlhttp = new XMLHttpRequest();
                }
                else { //codice per IE5 o IE6 dimmerda!!!
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
                xmlhttp.onreadystatechange = function () {
                    if (this.readyState == 4 && this.status == 200) {
                        document.getElementById("umis"+current).innerHTML = this.responseText;
                    }
                };
                if (type == 'p') {
                    xmlhttp.open("GET", "getumis.php?type=pietanza&q="+str, true);
                }
                else {
                    xmlhttp.open("GET", "getumis.php?type=ingredientscomponents&q="+str, true);
                }
                xmlhttp.send();
            }   
        }
    </script>

    <script type="text/javascript">
        $(document).ready(function() {
            $("body").on('keydown', '[id^="data"]', function(e) {
                if ((e.keyCode == 8) || (e.keyCode >= 96 && e.keyCode <= 105) || (e.keyCode >= 48 && e.keyCode <= 57)) {
                    return;
                }
                else {
                    alert("Solo numeri!");
                    e.preventDefault();
                }
            });
        });

        $(document).ready(function() {
            $("body").on('keydown', '[id^="quantita"]', function(e) {
                //8 is backspace, 110 and 190 are fullstops, 96-105 are NumPads and 48-57 are numbers
                if ((e.keyCode == 8) || (e.keyCode == 110) || (e.keyCode == 190) || (e.keyCode >= 96 && e.keyCode <= 105) || (e.keyCode >= 48 && e.keyCode <= 57)) {
                    return;
                }
                else {
                    if (e.keyCode == 188) {
                        alert("Usare il punto per separare i decimali, non la virgola!");
                    }
                    else {
                        alert("Solo numeri!");
                    }
                    e.preventDefault();
                }
            });
        });
    </script>
    <script type="text/javascript">
        $(function(){
          $('.datepicker').datepicker();
        });
    </script>

</body>
</html>

https://jsfiddle.net/9n4ws9tg/2/

Answer 1

在您的情况下，相关事件在错误的时间添加到选择中: 试试这个:

 <script type="text/javascript">
    $(function(){
            $("#sel").change(function(){
                  $('.datepicker').datepicker();
            });
    });
</script>