Django继承base模板时Fengyuan Chen Datepicker无法触发问题咨询

• 排查点1：子模板内容未放入block块导致元素丢失
  Django模板继承规则要求，除{% extends %}声明外，子模板的所有有效内容必须放在父模板定义的对应block块中。你当前的<input id="datepicker">写在{% block myBlock %}外部，这部分内容会被Django直接丢弃，实际渲染的页面不存在该输入框，JS选择器找不到元素自然无法完成初始化。
  解决方式：将input元素放入对应block块内，或在base.html中新增页面内容块放置页面主体内容。

• 排查点2：父模板块定义缺失或位置错误
  需确认base.html中已定义名为myBlock的块，且块的位置在jQuery、datepicker依赖资源引入之后，否则初始化代码执行时依赖还未加载完成会触发报错。建议将自定义JS的统一块放在base.html的</body>标签前，确保DOM和依赖加载完成后再执行自定义JS：

<!-- base.html 末尾示例 -->
    {% block extra_js %}{% endblock %}
</body>
</html>

• 排查点3：多日期选择器的ID重复问题
  后续需要添加多个日期选择器时，不要使用固定ID，改用class选择器避免ID重复导致初始化失效。

修正后完整代码示例 #

base.html #

<head>
    /* 其他不相关代码*/
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"> 
    </script>

    <!-- Fengyuan Chen's Datepicker -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.5/datepicker.min.css" integrity="sha256-b88RdwbRJEzRx95nCuuva+hO5ExvXXnpX+78h8DjyOE=" crossorigin="anonymous" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.5/datepicker.min.js" integrity="sha256-/7FLTdzP6CfC1VBAj/rsp3Rinuuu9leMRGd354hvk0k" crossorigin="anonymous"></script>
</head>
<body>
    <!-- 公共页面内容如导航、侧边栏等 -->
    {% block content %}{% endblock %}

    <!-- 自定义JS统一入口 -->
    {% block extra_js %}{% endblock %}
</body>

子页面test1.html #

{% extends 'main/base.html' %}

{% block content %}
<!-- 支持多个日期选择器，共用class即可 -->
<input class="datepicker">
<input class="datepicker">
<input class="datepicker">
{% endblock %}

{% block extra_js %}
<script>
  $(function () {
    // 一次性初始化所有日期选择器
    $(".datepicker").datepicker();
  });
</script>
{% endblock %}

验证方式 #

修改后打开页面按F12打开开发者工具：

1. 查看Elements面板确认输入框元素已正常渲染
2. 查看Console面板确认无JS报错
   无异常情况下点击输入框即可正常弹出日期选择器。

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