Python 以自定义形式使用Django时间/日期小部件

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

我已经看过了，它简要地提到了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>

---

我对Django/MVC/MTV这件事还比较陌生，所以请放轻松…

随着时间的推移，这个答案越来越复杂，而且需要很多技巧，可能应该提醒你不要这样做。它依赖于管理员未记录的内部实现细节，在Django的未来版本中可能会再次崩溃，实现起来并不比找到另一个JS日历小部件并使用它简单

也就是说，如果你决心让这项工作成功，你必须做以下几点：

为您的模型定义您自己的ModelForm子类（最好将其放在应用程序中的forms.py中），并告诉它使用AdminDateWidget/AdminTimeWidget/AdminSplitDateTime（用模型中的正确字段名替换“mydate”等）：

将URLconf更改为将“form\u class”：ProductForm而不是“model”：Product传递到通用的create\u对象视图（当然，这意味着“从my\u app.forms导入ProductForm”而不是“从my\u app.models导入产品”）

在模板的头部，包括{{form.media}}以输出指向Javascript文件的链接

还有骇客的部分：管理员日期/时间小部件假定i18njs已经加载，并且还需要core.JS，但不会自动提供。因此，在{{form.media}上面的模板中，您需要：

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

最后，如果您使用的是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>

{%load adminmedia%}/*位于模板顶部*/
/*在模板的头部分*/
窗口。\uuuuu admin\u media\u prefix\uuuuu=“{%filter escapejs%}{%admin\u media\u prefix%}{%endfilter%}”；

---

感谢您的添加。

由于该解决方案很粗糙，我认为使用您自己的带有JavaScript的日期/时间小部件更可行。

是的，我最终覆盖了/admin/jsi18n/url

下面是我在我的url.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)

---

作为对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 %}

{%block extra_head%}
{{form.media}
{%endblock%}

我发现自己经常引用这篇文章，并发现该文章定义了一种稍微不太粗糙的方法来覆盖默认小部件

（无需重写ModelForm的_init__方法）

然而，正如Carl提到的，您仍然需要适当地连接JS和CSS

forms.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

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)

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']

---

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

更新了SplitDateTime的解决方案和解决方法，其中必需=False：

forms.py

form.html

---

如果上述操作失败，以下操作也将作为最后手段

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

---

从django.forms.extras.widgets导入SelectDateWidget，从django 1.2 RC1开始，将其放入您的forms.py

，如果您使用django管理员日期选择器widge技巧，则必须将以下内容添加到模板中，否则您将看到日历图标url通过“/缺少管理员媒体前缀/”引用

{%load adminmedia%}/*位于模板顶部*/
/*在模板的头部分*/
窗口。\uuuuu admin\u media\u prefix\uuuuu=“{%filter escapejs%}{%admin\u media\u prefix%}{%endfilter%}”；
将一个类分配给小部件，然后将该类绑定到JQuery datepicker怎么样

Django forms.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();

1.4版的我的头代码（有些是新的，有些是删除的）

{%block extrahead%}
{%endblock%}
在Django 10中。
myproject/url.py：
在开始的时候

  from django.views.i18n import JavaScriptCatalog

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

在my 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>

{%load staticfiles%}
{#加载js的国际化}
{%load i18n admin_modify%}
我使用这个，它很棒，但我在模板方面有两个问题：

  $(".datepicker").datepicker();

对于模板中的每个字段，我会看到日历图标两次
对于时间字段，我有'输入一个有效日期。'


型号.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

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)

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']

forms.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

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)

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']

对于Django>=2.0
注意：在日期时间字段中使用管理员小部件不是一个好主意，因为如果您使用引导或任何其他CSS框架，管理员样式表可能会与您的站点样式表冲突。如果您是在引导程序上构建站点，请使用我的引导程序日期选择器小部件

步骤1:将
javascript目录添加到项目（非应用程序）的
URL.py
文件中

from django.views.i18n import JavaScriptCatalog

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

步骤2:将所需的JavaScript/CSS资源添加到模板中

{% 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 %}


.calendar>表>标题{标题侧：取消设置}
{{form.media}{{form required JS和CSS}

第3步：在
表单.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,
        }

我的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 %}

{%extends'base.html%}
{%load static%}
{%load i18n%}
{%block head%}
添加采访
{%endblock%}
{%block content%}

下半部分：

{% 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 %}


{%endblock%}
2020年6月3日（所有答案都无效，您可以尝试我使用的此解决方案。仅适用于TimeField）

对时间字段（startCharfield

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()

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

    begin = DateTimeField(widget=MinimalSplitDateTimeMultiWidget())