为什么 datepicker 不能在 userfrosting 的树枝上工作？

Question

这里有点初学者，这个问题让我头疼了一天多。我正在使用 userfrosting 作为框架，以及用于网页的常用 twig 文件。

我正在尝试在树枝中的表单中包含一个 datepicker（bootstrap-datepicker.js 没有工作，当前使用 jquery-ui 的迭代也没有） - 但无论我做什么，我都做不到让它工作！

这是基本设置：

{% block head %}
    {{ parent() }}
    <script src="{{site.uri.js}}/jquery-1.11.2.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
    <script src="{{site.uri.js}}/custom.js" ></script>
{% endblock %}

{% block content %}
.... {{boring stuff missed out}}
<form class="form-inline" role="form">
.... {{boring stuff missed out}}
<div class="form-group row">
    <label for="datepicker" class="col-sm-3 form-control-label">Subject Date:</label>
    <div class="col-sm-6">
        <input type="date" class="form-control" id="datepicker" />
    </div>
</div>
.... {{boring stuff missed out}}
</form>
.... {{boring stuff missed out}}
{% endblock %}

{% block javascripts %}
<script type="text/javascript">
    $(document).ready(function() {
        $("#datepicker").datepicker();
    });
</script>
{% endblock %}

该框在页面上，您可以在其中输入日期等，但单击它时没有任何显示（应该会出现一个日历。）

有人有什么想法吗？我完全不知所措。我已经在本地和（如您所见，目前）在 CDN 上尝试了各种版本，但没有任何效果。我确信这可能是一些基本的东西，因为我不是经验丰富的网络开发人员或任何东西，但任何建议或工作示例都将不胜感激！

Answer 1

呃！ 掌心

好吧，在对检查器输出进行一些挖掘和认真考虑之后（感谢 CTRL-SHIFT-I！），结果证明这是脚本加载顺序和加载多个脚本的简单案例。

我没有意识到 twig 在我要求它加载到我正在创建的模板中的内容之上加载了一整桶脚本。只有在看到页面的检查器输出后，我才看到我正在尝试加载两个不同版本的 jQuery，并且我自己的自定义脚本被乱序加载 - 我在这里加载它们：

{% block head %}
  {{ parent() }}
  <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
  <script src="{{site.uri.js}}/custom.js" ></script>
{% endblock %}

该块应该保留给样式表。相反，我应该在这里加载它们：

{% block page_scripts %}
  <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
  <script src="{{site.uri.js}}/custom.js"></script>
{% endblock %}

...以便在所有默认 Bootstrap 和 userfrosting 脚本之后加载它们。

Answer 2

https://jqueryui.com/datepicker/ 使用 type="text" 作为输入字段。当我在谷歌上搜索这件事时，似乎 type="date" 至少以前曾引起过问题。

简而言之：我会尝试将 type="date" 更改为 type="text"。