javascript - 如何正确设置按钮附带的日期选择器

我目前正在使用Grappelli进行Django项目，并且正在尝试创建一个模仿标准更改表单的页面。该页面不是基于任何模型的，因此我只是自己在所有字段中添加。但是，我在使用日期选择器时遇到了麻烦。每当我单击应该显示日历的按钮时，都不会发生任何事情。我敢肯定，我只是没有包括一些重要的东西。

这是我当前的代码：

{% extends "admin/change_form.html" %}

{% block javascripts %}
{{ block.super }}
{% endblock %}

{% block content %}

    <div id="grp-content-container">
        <form enctype="multipart/form-data" action method="post">
            {% csrf_token %}
            <div>
                <fieldset class="module grp-module">
                    <div class="form-row grp-row grp-cells-1 dob">
                        <div class="field-box l-2c-fluid l-d-4">
                            <div class="c-1">
                                <label class="required" for="dob">Birthday</label>
                            </div>
                            <div class="c-2">
                                <p class="datetime">
                                    <input class="vDateField hasDatepicker" type="text" id="dob" name="dob">
                                    <button id="dob-button" type="button" class="ui-datepicker-trigger"></button>
                                </p>
                            </div>
                        </div>
                    </div>
               </fieldset>
            </div>
        </form>
    </div>
{% endblock %}

在javascripts块中，我试图添加从该网站http://jqueryui.com/datepicker/提取的datepicker源功能，但这似乎没有任何效果。有什么建议？

最佳答案

我已经做过几次了，并想通过grappelli告诉我它几乎是开箱即用的。

兴趣点：

grappelli.js包含以下行：

var dateFields = $("input[class*='vDateField']:not([id*='__prefix__'])");
dateFields.datepicker(options);

而grappelli.reinitDateTimeFields函数将其重新初始化。

因此，基本上您要做的就是将vDateField或/和vTimeField类放入输入字段，并确保grappelli.js正确加载，并且在准备好文档时调用grappelli.initDateAndTimePicker()。然后带有日期选择器的按钮应自动加载。

您可以确定grappelli.initDateAndTimePicker()会像其他任何JS文件一样被调用：只需将debugger;放在grappelli.js中initDateAndTimePicker构造函数中的某个位置，然后它必须在您的js-inspector中暂停。

希望对您有所帮助。

关于javascript - 如何正确设置按钮附带的日期选择器，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38574626/