让 Bootstrap 日期时间选择器在 ajax 加载后工作

Question

我有一个以普通形式运行的简单脚本：

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

Answer 1

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

Answer 2

这是一个示例代码。请注意在插入表单 html

后，成功回调中如何调用 datetimepicker

// 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 });

    }
  });
});

Answer 3

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

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

并注意。添加 css

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

让 Bootstrap 日期时间选择器在 ajax 加载后工作

Get Bootstrap datetimepicker to work after ajax loaded

javascript

ajax

jquery

twitter-bootstrap