如何正确设置附加到按钮的日期选择器
How to properly set up datepicker attached to a button
我目前正在使用 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/ 的日期选择器源功能,但这似乎没有任何效果。有什么建议吗?
我以前做过几次,想告诉大家 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 中。
希望对你有所帮助,对我有用。
我目前正在使用 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/ 的日期选择器源功能,但这似乎没有任何效果。有什么建议吗?
我以前做过几次,想告诉大家 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 中。
希望对你有所帮助,对我有用。