如何正确设置附加到按钮的datepicker

时间:2016-07-25 18:06:08

标签: javascript jquery django datepicker django-grappelli

我目前正在使用Grappelli开发Django项目,我正在尝试创建一个模仿标准更改表单的页面。该页面不基于任何模型,因此我只是自己添加所有字段。但是,我在使用datepicker时遇到了麻烦。每当我点击应该显示日历的按钮时,都没有任何反应。我确信我不会包含一些重要的内容。

这是我目前的代码:

{% 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源功能,但这似乎没有任何效果。有什么建议吗?

1 个答案:

答案 0 :(得分:0)

我之前已经完成了几次,并希望通过grappelli告诉它,它几乎可以开箱即用。

兴趣点:

grappelli.js这一行:

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

grappelli.reinitDateTimeFields函数可以重新启动它。

所以你基本上所要做的就是将vDateField或/和vTimeField类放到输入字段中,并确保正确加载grappelli.js并调用grappelli.initDateAndTimePicker()文件准备好了。然后带有datepicker的按钮应自动加载。

您可以确定grappelli.initDateAndTimePicker()被调用为任何其他JS文件:只需将debugger;放在grappelli.js中initDateAndTimePicker构造函数中的某处,然后它必须在您的js中暂停 - 检查员。

希望有所帮助,它对我有用。