Использование виджетов времени / даты в Django в произвольной форме - PullRequest
166 голосов
/ 02 сентября 2008

Как я могу использовать изящные виджеты даты и времени 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, так что, пожалуйста, успокойтесь ...

Ответы [ 14 ]

156 голосов
/ 02 сентября 2008

Растущая сложность этого ответа с течением времени и множество необходимых взломов, вероятно, должны предостеречь вас от этого вообще. Он полагается на недокументированные внутренние детали реализации администратора, и, скорее всего, снова сломается в будущих версиях Django, и его легче реализовать, чем просто найти другой виджет календаря JS и использовать его.

Тем не менее, вот что вам нужно сделать, если вы полны решимости сделать эту работу:

  1. Определите свой собственный подкласс ModelForm для вашей модели (лучше всего поместить его в forms.py в вашем приложении) и попросите его использовать AdminDateWidget / AdminTimeWidget / AdminSplitDateTime (замените «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 (что будет означать «из my_app.forms import ProductForm» вместо «из 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 (или null_javascript_catalog, если вы не используете I18N). Вы должны сделать это самостоятельно, вместо того, чтобы проходить через приложение администратора, чтобы оно было доступно независимо от того, вошли ли вы в систему администратора (спасибо Джереми за это указание). Пример кода для вашего 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 за это дополнение.

63 голосов
/ 16 сентября 2008

Поскольку решение хакерское, я думаю, что использование собственного виджета даты / времени с некоторым JavaScript более целесообразно.

12 голосов
/ 03 января 2009

Да, я переопределил / admin / jsi18n / url.

Вот что я добавил в свой 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)
11 голосов
/ 12 июля 2012

Код моей головы для версии 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 %}
11 голосов
/ 08 сентября 2009

Я часто ссылаюсь на этот пост и обнаружил, что документация определяет немного менее хакерский способ переопределения виджетов по умолчанию.

( Нет необходимости переопределять метод __init__ в ModelForm )

Тем не менее, вам все равно нужно правильно подключить 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

Ссылка Типы полей для поиска полей формы по умолчанию.

10 голосов
/ 12 мая 2010

Начиная с Django 1.2 RC1, если вы используете трюк с виджетом для выбора даты администратора Django, в шаблон необходимо добавить следующее, или вы увидите ссылку на значок календаря, на которую ссылается ссылка "/ missing-admin- медиа-приставка /".

{% 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>
7 голосов
/ 06 апреля 2009

В дополнение к ответу Карла Мейера, я хотел бы прокомментировать, что вам нужно поместить этот заголовок в некоторый допустимый блок (внутри заголовка) в вашем шаблоне.

{% 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 %}
5 голосов
/ 07 марта 2010

Нижеследующее также будет работать в крайнем случае, если вышеприведенное не удалось

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

3 голосов
/ 17 августа 2018

Для Джанго> = 2,0

Примечание. Использование виджетов администратора для полей даты и времени не является хорошей идеей, поскольку таблицы стилей администратора могут конфликтовать с таблицами стилей вашего сайта, если вы используете загрузчик или любые другие CSS-фреймворки. Если вы создаете свой сайт с помощью bootstrap, используйте мой виджет bootstrap-datepicker django-bootstrap-datepicker-plus .

Шаг 1: Добавьте javascript-catalog URL к файлу вашего проекта (не приложения) 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,
        }
3 голосов
/ 04 февраля 2012

А как насчет того, чтобы просто назначить класс вашему виджету и затем связать этот класс с датчиком JQuery?

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();
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...