在 ajax 链接选择框中添加日期选择器

Question

我在修复它们时有很多错误，但问题是，当我点击日期选择器时，为什么不弹出？这是我唯一的问题，要定位哪个 div？

<?php
require '../common/pdo_connect.php';



try{
  $stmt = $db->query("SELECT date FROM disabledate");
  $db_ddates = $stmt->fetchAll(\PDO::FETCH_ASSOC);

  $js_ddates = "";
  foreach ($db_ddates as $row => $record) {
    $js_ddates .= '"' . $record['date'] . '",';
  }

}
catch(\PDOException $e) {
  echo $e->getMessage();
}

   ?>







                <label>Pick a date

                <input
                    id="drop3"
                    class="datepicker"
                    name="drop3"
                    type="text"
                    value=""
                    data-value="">

                    </label>




        <div id="container"></div>





    <script src="datepicker/tests/jquery.1.9.1.js"></script>
    <script src="datepicker/lib/picker.js"></script>
    <script src="datepicker/lib/picker.date.js"></script>
    <script src="datepicker/lib/legacy.js"></script>



    <script type="text/javascript">
    //datepicker
    // take dates as array of strings from db
var ddates_str_arr = [ <?php echo $js_ddates; ?> ];
// build dates array for picker
var disdates = [];
for (var i = 0; i < ddates_str_arr.length; i++) {
  disdates.push(new Date(ddates_str_arr[i]));
}

var $input = $( '.datepicker' ).pickadate({
  formatSubmit: 'yyyy/mm/dd',
  min: true,
  container: '#container',
  // editable: true,
  closeOnSelect: true,
  closeOnClear: false,
  disable: disdates
});


        var picker = $input.pickadate('picker')
    </script>



<script src="jquery-1.9.0.min.js"></script>
<script>
$(document).ready(function(){


$("div#container").change(function(){

    var products_id = $("input#drop3").attr('value');

    if (products_id.length > 0 ) {
     $.ajax({
            type: "POST",
            url: "fetch_employees.php",
            data: "products_id="+products_id,
            cache: false,
            beforeSend: function () {
                $('#employees').html('<img src="loader.gif" alt="" width="24" height="24">');
            },
            success: function(html) {    
                $("#employees").html( html );
            }
        });
    } else {
        $("#employees").html( "" );
    }
});

});
</script>

Answer 1

尝试使用 json 将数据从 db 传递到您的 datepiker：

    <?php
        require '../common/pdo_connect.php';



        try{
          $stmt = $db->query("SELECT date FROM disabledate");
          $db_ddates = $stmt->fetchAll(\PDO::FETCH_ASSOC);

          $js_ddates = json_encode([dates=>$db_ddates]);

        }
        catch(\PDOException $e) {
          echo $e->getMessage();
        }

           ?>







                        <label>Pick a date

                        <input
                            id="drop3"
                            class="datepicker"
                            name="drop3"
                            type="text"
                            value=""
                            data-value="">

                            </label>




                <div id="container"></div>





            <script src="datepicker/tests/jquery.1.9.1.js"></script>
            <script src="datepicker/lib/picker.js"></script>
            <script src="datepicker/lib/picker.date.js"></script>
            <script src="datepicker/lib/legacy.js"></script>



            <script type="text/javascript">
$(document).ready(function(){
            //datepicker
            // take dates as array of strings from db
        var ddates_str_arr = JSON.parse('<?php echo $js_ddates; ?>');
        // build dates array for picker
        var disdates = [];
        $.each(ddates_str_arr.dates,function(i,v) {
          disdates.push(new Date(v));
        })

        var $input = $( '.datepicker' ).pickadate({
          formatSubmit: 'yyyy/mm/dd',
          min: true,
          container: '#container',
          // editable: true,
          closeOnSelect: true,
          closeOnClear: false,
          disable: disdates
        });


                var picker = $input.pickadate('picker')



        $("div#container").change(function(){

            var products_id = $("input#drop3").attr('value');

            if (products_id.length > 0 ) {
             $.ajax({
                    type: "POST",
                    url: "fetch_employees.php",
                    data: "products_id="+products_id,
                    cache: false,
                    beforeSend: function () {
                        $('#employees').html('<img src="loader.gif" alt="" width="24" height="24">');
                    },
                    success: function(html) {    
                        $("#employees").html( html );
                    }
                });
            } else {
                $("#employees").html( "" );
            }
        });

        });
        </script>