让 Bootstrap datetimepicker 在 ajax 加载后工作

Get Bootstrap datetimepicker to work after ajax loaded

本文关键字：加载 工作 ajax Bootstrap datetimepicker      更新时间：2023-09-26

>我有这个简单的脚本，它可以在正常形式上工作：

<script>
        $(function () {
            $('.datepicker').datetimepicker({ pickTime: false, format: "DD-MM-YYYY" });
            $('.timepicker').datetimepicker({ pickDate: false, format: "HH:mm", pick12HourFormat: false });
        });
</script>

但是，如果我通过 ajax 将表单加载到 Bootstrap 3 模式中 - 时间和日期选择器不起作用。我知道问题是因为我通过 ajax 加载表单。

那么如何为新加载的 ajax 表单注册函数呢？

编辑：这就是我调用ajax模型的方式：

<a data-toggle="modal" class="btn btn-danger" href="/example" data-target="#myModal">Load Modal</a>

我有同样的问题，这是我的代码

  $(document).on("focusin","input[type=date]", function () {
        $(this).datepicker({
            autoclose: true,
            format: 'yyyy-mm-dd'
        });
    });

并注意。 添加 CSS

.datepicker{z-index:1151 !important;}
在

模态示例页面的 head 标签内放置一个 jquery.js。您可能引用它的父页面上的 Jquery 对您显示为模态的第二个页面不可见。

下面是一个示例代码。请注意插入表单 html 后如何在成功回调中调用日期时间选取器

// this code gets called wheb whole page is loaded
$(function () {
  // this is your code to load form
  $.ajax({
    type: "POST",
    url: "/path/to/form",
    data: data,
    // this is success callback, gets called when you got 
    // response from server
    success: function(response) {
      // here you take from html from response and insert it on the page
      $('#form_container').html(response);
      // and then you load bootstrap-datetimepicker
      $('.datepicker').datetimepicker({ pickTime: false, format: "DD-MM-YYYY" });
      $('.timepicker').datetimepicker({ pickDate: false, format: "HH:mm", pick12HourFormat: false });
    }
  });
});
相关文章：