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

Question

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

我正在尝试在形成一根树枝 - 但无论我做什么，我都无法让它发挥作用！

基本设置如下：

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

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

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

Answer 2

呃！捂脸

好吧，在对检查器输出进行一些挖掘和认真考虑之后（感谢 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 和用户霜化脚本之后加载它们。

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

Why won't datepicker work in a twig in userfrosting?

jquery-plugins

twig

bootstrap-datepicker

userfrosting