如何正确设置附加到按钮的日期选择器

Question

我目前正在使用 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/ 的日期选择器源功能，但这似乎没有任何效果。有什么建议吗？

Answer 1

我以前做过几次，想告诉大家 grappelli 它几乎开箱即用。

兴趣点：

grappelli.js 这几行：

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

和 grappelli.reinitDateTimeFields 重新初始化这个的函数。

所以基本上你所要做的就是把 vDateField or/and vTimeField class 到你的输入字段并确保 grappelli.js 正确加载并且 grappelli.initDateAndTimePicker() 在文档准备好时被调用。然后带有日期选择器的按钮应该会自动加载。

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

希望对你有所帮助，对我有用。

如何正确设置附加到按钮的日期选择器

How to properly set up datepicker attached to a button

javascript

django

jquery

datepicker

django-grappelli