180

如何使用默认管理员在我的自定义视图中使用的漂亮的 JavaScript 日期和时间小部件?

我浏览了 Django 表单文档,它简要提到了 django.contrib.admin.widgets,但我不知道如何使用它?

这是我想要应用的模板。

<form action="." method="POST">
    <table>
        {% for f in form %}
           <tr> <td> {{ f.name }}</td> <td>{{ f }}</td> </tr>
        {% endfor %}
    </table>
    <input type="submit" name="submit" value="Add Product">
</form>

另外,我认为应该注意的是,我自己并没有真正为这个表单编写视图,我使用的是通用视图。这是来自 url.py 的条目:

(r'^admin/products/add/$', create_object, {'model': Product, 'post_save_redirect': ''}),

而且我对整个 Django/MVC/MTV 的事情都比较陌生,所以请放轻松...

4

17 回答 17

166

随着时间的推移,这个答案越来越复杂,并且需要许多技巧,可能应该警告你不要这样做。它依赖于管理员未记录的内部实现细节,很可能在未来版本的 Django 中再次出现问题,而且实现起来并不比找到另一个 JS 日历小部件并使用它更容易。

也就是说,如果您决心完成这项工作,您必须执行以下操作:

  1. 为您的模型定义您自己的ModelForm子类(最好将其放在应用程序中的 forms.py 中),并告诉它使用AdminDateWidget// AdminTimeWidgetAdminSplitDateTime将“mydate”等替换为模型中的正确字段名称):

     from django import forms
     from my_app.models import Product
     from django.contrib.admin import widgets                                       
    
     class ProductForm(forms.ModelForm):
         class Meta:
             model = Product
         def __init__(self, *args, **kwargs):
             super(ProductForm, self).__init__(*args, **kwargs)
             self.fields['mydate'].widget = widgets.AdminDateWidget()
             self.fields['mytime'].widget = widgets.AdminTimeWidget()
             self.fields['mydatetime'].widget = widgets.AdminSplitDateTime()
    
  2. 将您的 URLconf 更改为传递'form_class': ProductForm而不是传递'model': Product给通用create_object视图(当然,这意味着from my_app.forms import ProductForm而不是from my_app.models import Product)。

  3. 在模板的头部,包含{{ form.media }}以输出指向 Javascript 文件的链接。

  4. 还有最棘手的部分:管理日期/时间小部件假定 i18n JS 内容已加载,并且还需要 core.js,但不会自动提供任何一个。因此,在您上面的模板中,{{ form.media }}您需要:

     <script type="text/javascript" src="/my_admin/jsi18n/"></script>
     <script type="text/javascript" src="/media/admin/js/core.js"></script>
    

您可能还希望使用以下管理 CSS(感谢Alex提到这一点):

    <link rel="stylesheet" type="text/css" href="/media/admin/css/forms.css"/>
    <link rel="stylesheet" type="text/css" href="/media/admin/css/base.css"/>
    <link rel="stylesheet" type="text/css" href="/media/admin/css/global.css"/>
    <link rel="stylesheet" type="text/css" href="/media/admin/css/widgets.css"/>

这意味着 Django 的管理媒体 ( ADMIN_MEDIA_PREFIX) 位于 /media/admin/ - 您可以为您的设置更改它。理想情况下,您会使用上下文处理器将此值传递给您的模板,而不是对其进行硬编码,但这超出了此问题的范围。

这还需要手动将 URL /my_admin/jsi18n/ 连接到 django.views.i18n.javascript_catalog 视图(如果您不使用 I18N,则为 null_javascript_catalog)。您必须自己执行此操作,而不是通过管理应用程序,因此无论您是否登录到管理员都可以访问它(感谢Jeremy指出这一点)。URLconf 的示例代码:

(r'^my_admin/jsi18n', 'django.views.i18n.javascript_catalog'),

最后,如果您使用的是 Django 1.2 或更高版本,您需要在模板中添加一些额外的代码来帮助小部件找到它们的媒体:

{% load adminmedia %} /* At the top of the template. */

/* In the head section of the template. */
<script type="text/javascript">
window.__admin_media_prefix__ = "{% filter escapejs %}{% admin_media_prefix %}{% endfilter %}";
</script>

感谢lupefiasco的添加。

于 2008-09-02T06:10:58.127 回答
65

由于该解决方案是骇人听闻的,我认为使用您自己的日期/时间小部件和一些 JavaScript 更可行。

于 2008-09-16T13:39:39.303 回答
14

我发现自己经常引用这篇文章,并发现文档定义了一种稍微不那么老套的方法来覆盖默认小部件。

无需重写 ModelForm 的 __init__ 方法

但是,正如 Carl 提到的那样,您仍然需要适当地连接您的 JS 和 CSS。

表格.py

from django import forms
from my_app.models import Product
from django.contrib.admin import widgets                                       


class ProductForm(forms.ModelForm):
    mydate = forms.DateField(widget=widgets.AdminDateWidget)
    mytime = forms.TimeField(widget=widgets.AdminTimeWidget)
    mydatetime = forms.SplitDateTimeField(widget=widgets.AdminSplitDateTime)

    class Meta:
        model = Product

参考字段类型以查找默认表单字段。

于 2009-09-08T06:42:05.557 回答
13

我的 1.4 版本的头代码(一些新的和一些删除的)

{% block extrahead %}

<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}admin/css/forms.css"/>
<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}admin/css/base.css"/>
<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}admin/css/global.css"/>
<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}admin/css/widgets.css"/>

<script type="text/javascript" src="/admin/jsi18n/"></script>
<script type="text/javascript" src="{{ STATIC_URL }}admin/js/core.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}admin/js/admin/RelatedObjectLookups.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}admin/js/jquery.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}admin/js/jquery.init.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}admin/js/actions.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}admin/js/calendar.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}admin/js/admin/DateTimeShortcuts.js"></script>

{% endblock %}
于 2012-07-12T07:06:08.117 回答
12

是的,我最终覆盖了 /admin/jsi18n/ 网址。

这是我在 urls.py 中添加的内容。确保它在 /admin/ url 之上

    (r'^admin/jsi18n', i18n_javascript),

这是我创建的 i18n_javascript 函数。

from django.contrib import admin
def i18n_javascript(request):
  return admin.site.i18n_javascript(request)
于 2009-01-02T22:53:21.183 回答
10

从 Django 1.2 RC1 开始,如果您使用 Django 管理员日期选择器小工具技巧,则必须将以下内容添加到您的模板中,否则您将看到日历图标 url 通过“/missing-admin-media-prefix”引用/”。

{% load adminmedia %} /* At the top of the template. */

/* In the head section of the template. */
<script type="text/javascript">
window.__admin_media_prefix__ = "{% filter escapejs %}{% admin_media_prefix %}{% endfilter %}";
</script>
于 2010-05-12T11:03:15.340 回答
7

补充 Carl Meyer 的答案,我想评论一下,您需要将该标题放在模板内的某个有效块(标题内)中。

{% block extra_head %}

<link rel="stylesheet" type="text/css" href="/media/admin/css/forms.css"/>
<link rel="stylesheet" type="text/css" href="/media/admin/css/base.css"/>
<link rel="stylesheet" type="text/css" href="/media/admin/css/global.css"/>
<link rel="stylesheet" type="text/css" href="/media/admin/css/widgets.css"/>

<script type="text/javascript" src="/admin/jsi18n/"></script>
<script type="text/javascript" src="/media/admin/js/core.js"></script>
<script type="text/javascript" src="/media/admin/js/admin/RelatedObjectLookups.js"></script>

{{ form.media }}

{% endblock %}
于 2009-04-05T20:02:00.187 回答
7

对于 Django >= 2.0

注意:对日期时间字段使用管理小部件不是一个好主意,因为如果您使用引导程序或任何其他 CSS 框架,管理样式表可能会与您的站点样式表发生冲突。如果您在引导程序上构建您的网站,请使用我的 bootstrap-datepicker 小部件django-bootstrap-datepicker-plus

第 1 步:javascript-catalogURL 添加到您的项目(不是应用程序)urls.py文件中。

from django.views.i18n import JavaScriptCatalog

urlpatterns = [
    path('jsi18n', JavaScriptCatalog.as_view(), name='javascript-catalog'),
]

第 2 步:将所需的 JavaScript/CSS 资源添加到您的模板。

<script type="text/javascript" src="{% url 'javascript-catalog' %}"></script>
<script type="text/javascript" src="{% static '/admin/js/core.js' %}"></script>
<link rel="stylesheet" type="text/css" href="{% static '/admin/css/widgets.css' %}">
<style>.calendar>table>caption{caption-side:unset}</style><!--caption fix for bootstrap4-->
{{ form.media }}        {# Form required JS and CSS #}

第 3 步:在您的forms.py.

from django.contrib.admin import widgets
from .models import Product

class ProductCreateForm(forms.ModelForm):
    class Meta:
        model = Product
        fields = ['name', 'publish_date', 'publish_time', 'publish_datetime']
        widgets = {
            'publish_date': widgets.AdminDateWidget,
            'publish_time': widgets.AdminTimeWidget,
            'publish_datetime': widgets.AdminSplitDateTime,
        }
于 2018-08-17T10:36:07.630 回答
5

如果上述方法失败,以下方法也将作为最后的手段

class PaymentsForm(forms.ModelForm):
    class Meta:
        model = Payments

    def __init__(self, *args, **kwargs):
        super(PaymentsForm, self).__init__(*args, **kwargs)
        self.fields['date'].widget = SelectDateWidget()

如同

class PaymentsForm(forms.ModelForm):
    date = forms.DateField(widget=SelectDateWidget())

    class Meta:
        model = Payments

把它放在你的forms.py中from django.forms.extras.widgets import SelectDateWidget

于 2010-03-07T16:09:57.770 回答
4

这是受@Sandeep 启发的另一个 2020 年解决方案。使用在这个gist中找到的 MinimalSplitDateTimeMultiWidget ,在我们的如下表单中,我们可以使用现代浏览器的日期和时间选择器(例如通过“type”:“date”)。我们不需要任何 JS。

class EditAssessmentBaseForm(forms.ModelForm):
    class Meta:
        model = Assessment
        fields = '__all__'

    begin = DateTimeField(widget=MinimalSplitDateTimeMultiWidget())

在此处输入图像描述

于 2020-09-10T05:21:46.033 回答
3

将一个类分配给您的小部件然后将该类绑定到 JQuery 日期选择器怎么样?

Django 表单.py:

class MyForm(forms.ModelForm):

  class Meta:
    model = MyModel

  def __init__(self, *args, **kwargs):
    super(MyForm, self).__init__(*args, **kwargs)
    self.fields['my_date_field'].widget.attrs['class'] = 'datepicker'

还有一些用于模板的 JavaScript:

  $(".datepicker").datepicker();
于 2012-02-04T06:50:50.557 回答
2

2021 年 Django 3 (3.2) 的另一个简单解决方案;) 导致 andyw 的解决方案在 Firefox 中不起作用......

{% load static %}

{% block extrahead %}
{{ block.super }}
<script type="text/javascript" src="{% static 'admin/js/cancel.js' %}"></script>
<link rel="stylesheet" type="text/css" href="{% static 'admin/css/forms.css' %}">
<script src="{% url 'admin:jsi18n' %}"></script>
<script src="{% static 'admin/js/jquery.init.js' %}"></script>
<script src="{% static 'admin/js/core.js' %}"></script>
{{ form.media }}
{% endblock %}

<form action="" method="post">
{% csrf_token %}
{{ form.as_p }}
<input type="submit" value="Сохранить">
</form>

你就可以使用你的表格了。例子:

from django.contrib.admin import widgets
date_time = forms.SplitDateTimeField(widget=widgets.AdminSplitDateTime)
于 2021-07-20T08:40:10.167 回答
1

使用required=False更新了SplitDateTime的解决方案和解决方法:

表格.py

from django import forms

class SplitDateTimeJSField(forms.SplitDateTimeField):
    def __init__(self, *args, **kwargs):
        super(SplitDateTimeJSField, self).__init__(*args, **kwargs)
        self.widget.widgets[0].attrs = {'class': 'vDateField'}
        self.widget.widgets[1].attrs = {'class': 'vTimeField'}  


class AnyFormOrModelForm(forms.Form):
    date = forms.DateField(widget=forms.TextInput(attrs={'class':'vDateField'}))
    time = forms.TimeField(widget=forms.TextInput(attrs={'class':'vTimeField'}))
    timestamp = SplitDateTimeJSField(required=False,)

表单.html

<script type="text/javascript" src="/admin/jsi18n/"></script>
<script type="text/javascript" src="/admin_media/js/core.js"></script>
<script type="text/javascript" src="/admin_media/js/calendar.js"></script>
<script type="text/javascript" src="/admin_media/js/admin/DateTimeShortcuts.js"></script>

网址.py

(r'^admin/jsi18n/', 'django.views.i18n.javascript_catalog'),
于 2009-12-02T14:29:53.093 回答
1

我用这个,很好,但是我的模板有两个问题:

  1. 对于模板中的每个文件,我都会看到两次日历图标。
  2. 对于 TimeField,我有 '输入有效日期。'

    这是表格的截图

模型.py

from django.db import models
    name=models.CharField(max_length=100)
    create_date=models.DateField(blank=True)
    start_time=models.TimeField(blank=False)
    end_time=models.TimeField(blank=False)

表格.py

from django import forms
from .models import Guide
from django.contrib.admin import widgets

class GuideForm(forms.ModelForm):
    start_time = forms.DateField(widget=widgets.AdminTimeWidget)
    end_time = forms.DateField(widget=widgets.AdminTimeWidget)
    create_date = forms.DateField(widget=widgets.AdminDateWidget)
    class Meta:
        model=Guide
        fields=['name','categorie','thumb']
于 2018-07-21T19:26:35.237 回答
0

在 Django 10.myproject/urls.py 中:在 urlpatterns 的开头

  from django.views.i18n import JavaScriptCatalog

urlpatterns = [
    url(r'^jsi18n/$', JavaScriptCatalog.as_view(), name='javascript-catalog'),
.
.
.]

在我的 template.html 中:

{% load staticfiles %}

    <script src="{% static "js/jquery-2.2.3.min.js" %}"></script>
    <script src="{% static "js/bootstrap.min.js" %}"></script>
    {# Loading internazionalization for js #}
    {% load i18n admin_modify %}
    <script type="text/javascript" src="{% url 'javascript-catalog' %}"></script>
    <script type="text/javascript" src="{% static "/admin/js/jquery.init.js" %}"></script>

    <link rel="stylesheet" type="text/css" href="{% static "/admin/css/base.css" %}">
    <link rel="stylesheet" type="text/css" href="{% static "/admin/css/forms.css" %}">
    <link rel="stylesheet" type="text/css" href="{% static "/admin/css/login.css" %}">
    <link rel="stylesheet" type="text/css" href="{% static "/admin/css/widgets.css" %}">



    <script type="text/javascript" src="{% static "/admin/js/core.js" %}"></script>
    <script type="text/javascript" src="{% static "/admin/js/SelectFilter2.js" %}"></script>
    <script type="text/javascript" src="{% static "/admin/js/admin/RelatedObjectLookups.js" %}"></script>
    <script type="text/javascript" src="{% static "/admin/js/actions.js" %}"></script>
    <script type="text/javascript" src="{% static "/admin/js/calendar.js" %}"></script>
    <script type="text/javascript" src="{% static "/admin/js/admin/DateTimeShortcuts.js" %}"></script>
于 2016-10-09T17:39:01.907 回答
0

我的 Django 设置:1.11 引导程序:3.3.7

由于没有一个答案是完全清楚的,我正在分享我的模板代码,它完全没有错误。

模板的上半部分:

{% extends 'base.html' %}
{% load static %}
{% load i18n %}

{% block head %}
    <title>Add Interview</title>
{% endblock %}

{% block content %}

<script type="text/javascript" src="{% url 'javascript-catalog' %}"></script>
<script type="text/javascript" src="{% static 'admin/js/core.js' %}"></script>
<link rel="stylesheet" type="text/css" href="{% static 'admin/css/forms.css' %}"/>
<link rel="stylesheet" type="text/css" href="{% static 'admin/css/widgets.css' %}"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
<script type="text/javascript" src="{% static 'js/jquery.js' %}"></script>

下半区:

<script type="text/javascript" src="/admin/jsi18n/"></script>
<script type="text/javascript" src="{% static 'admin/js/vendor/jquery/jquery.min.js' %}"></script>
<script type="text/javascript" src="{% static 'admin/js/jquery.init.js' %}"></script>
<script type="text/javascript" src="{% static 'admin/js/actions.min.js' %}"></script>
{% endblock %}
于 2019-03-11T10:22:56.823 回答
0

2020 年 6 月 3 日(所有答案均无效,您可以尝试我使用的此解决方案。仅适用于 TimeField)

在表单中使用简单Charfield的时间字段(本示例中的开始结束)。

表格.py

我们可以使用FormModelForm在这里。

class TimeSlotForm(forms.ModelForm):
    start = forms.CharField(widget=forms.TextInput(attrs={'placeholder': 'HH:MM'}))
    end = forms.CharField(widget=forms.TextInput(attrs={'placeholder': 'HH:MM'}))

    class Meta:
        model = TimeSlots
        fields = ('start', 'end', 'provider')

将字符串输入转换为视图中的时间对象。

import datetime
def slots():
    if request.method == 'POST':
        form = create_form(request.POST)
        if form.is_valid():                
            slot = form.save(commit=False)
            start = form.cleaned_data['start']
            end = form.cleaned_data['end']
            start = datetime.datetime.strptime(start, '%H:%M').time()
            end = datetime.datetime.strptime(end, '%H:%M').time()
            slot.start = start
            slot.end = end
            slot.save()
于 2020-06-03T19:55:49.180 回答