jQuery datepicker模态框加载时未初始化 应给哪些元素加[data-toggle='open_modal']

你需要把[data-toggle='open_modal']属性添加到所有用于触发模态框弹出的可交互元素上，最常见的是打开模态框的按钮、文字链接元素。

该属性的作用是作为统一的选择器标识，让你可以批量给所有模态框触发动作绑定事件，确保每次模态框加载完成后，都能重新执行datepicker的初始化逻辑，解决模态框DOM重载后datepicker绑定失效的问题。

示例代码 #

正确添加属性的DOM元素示例 #

<!-- 按钮形式的模态框触发元素 -->
<button type="button" data-toggle="open_modal" data-target="#yourModalId">
  打开带日期选择的表单
</button>

<!-- 超链接形式的模态框触发元素 -->
<a href="javascript:;" data-toggle="open_modal" data-target="#yourModalId">
  新建预约
</a>

配套的事件绑定逻辑示例 #

// 监听所有带指定属性的触发元素的点击动作
$('[data-toggle="open_modal"]').on('click', function() {
  // 等待模态框完全渲染后再初始化datepicker，先解绑旧事件避免重复触发
  $('#yourModalId').off('shown.bs.modal').on('shown.bs.modal', function () {
    // 先销毁可能存在的旧datepicker实例，避免重复绑定报错
    $('.datepicker-element').datepicker('destroy');
    // 重新初始化datepicker
    $('.datepicker-element').datepicker({
      // 你的datepicker自定义配置
      dateFormat: 'yy-mm-dd',
      changeMonth: true,
      changeYear: true
    });
  });
});

内容的提问来源于stack exchange，提问作者zari