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

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

Answer 2

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

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

并注意。添加css

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

Answer 3

这是一个示例代码。注意在插入表单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 4

从AJAX加载表单后运行datepicker脚本。在注册日期选择器之前，表格需要到位。

听起来像是对我有秩序的问题。

获取ajax后，获取Bootstrap datetimepicker

4 个答案: