Ved hjelp av Django tid / dato widgets på tilpasset skjema

stemmer
159

Hvordan kan jeg bruke den fiffige Javascript dato og klokkeslett widgets som standard admin bruker med min egendefinert visning?

Jeg har sett gjennom den Django skjemaer dokumentasjon , og det kort nevner django.contrib.admin.widgets, men jeg vet ikke hvordan de skal bruke det?

Her er mitt mal som jeg vil ha det brukes på.

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

Også tror jeg det bør bemerkes at jeg ikke har virkelig skrevet en utsikt opp meg selv for dette skjemaet, jeg bruker en generisk utsikt. Her er en oppføring fra url.py:

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

Og jeg er relevantly ny til hele Django / MVC / MTV ting, så kan du gå lett ...

Publisert på 01/09/2008 klokken 23:22
kilden bruker
På andre språk...                            


16 svar

stemmer
151

Den økende kompleksiteten i dette svaret over tid, og de mange hacks som kreves, sannsynligvis burde advare deg mot å gjøre dette i det hele tatt. Det er avhengig av udokumenterte interne gjennomføringen detaljer av admin, er sannsynlig å bryte igjen i fremtidige versjoner av Django, og er ikke noe enklere å implementere enn bare å finne en annen JS kalender-widget og bruke det.

Når det er sagt, her er hva du må gjøre hvis du er fast bestemt på å gjøre dette arbeidet:

  1. Definer din egen ModelForm underklasse for din modell (best å sette den i forms.py i app), og fortelle den til å bruke AdminDateWidget / AdminTimeWidget / AdminSplitDateTime (erstatte mydate 'etc med de riktige feltnavnene fra din modell):

    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. Endre URLconf å passere 'form_class': ProductForm i stedet for 'Modell': Produkt til generiske create_object syn (som vil bety "fra my_app.forms importere ProductForm" istedenfor "fra my_app.models importere produkt", selvfølgelig).

  3. I hodet på malen, inkluderer {{form.media}} å sende ut lenker til Javascript-filer.

  4. Og Hacky delen: admin dato / klokkeslett widgets anta at i18n JS ting har blitt lastet, og krever også core.js, men gir ikke det ene automatisk. Så i malen ovenfor {{form.media}} du trenger:

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

    Du kan også ønske å bruke følgende admin CSS (takket Alex for å nevne dette):

    <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"/>
    

Dette innebærer at Django administrator media (ADMIN_MEDIA_PREFIX) er på / media / admin / - du kan endre det for oppsettet. Ideelt sett ville du bruke en kontekst prosessor til å passere dette verdier i malen i stedet for hardcoding det, men det er utenfor rammen av dette spørsmålet.

Dette krever også at nettadressen / my_admin / jsi18n / manuelt kablet opp til django.views.i18n.javascript_catalog visning (eller null_javascript_catalog hvis du ikke bruker I18N). Du må gjøre dette selv i stedet for å gå gjennom admin-programmet slik at det er tilgjengelig uansett om du er logget inn i admin (takk Jeremy for å peke ut dette). Eksempelkode for URLconf:

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

Til slutt, hvis du bruker Django 1.2 eller senere, du trenger litt ekstra kode i malen for å hjelpe widgets finne sin media:

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

Takket Lupe Fiasco for dette tillegget.

Svarte 02/09/2008 kl. 06:10
kilden bruker

stemmer
62

Som løsningen er hackish, tror jeg at du bruker din egen dato / klokkeslett widget med noen Javascript er mer gjennomførbart.

Svarte 16/09/2008 kl. 13:39
kilden bruker

stemmer
12

Jepp, jeg endte opp med å overstyre / admin / jsi18n / url.

Her er hva jeg har lagt i min urls.py. Sørg for at det er over / admin / url

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

Og her er den i18n_javascript funksjon jeg har laget.

from django.contrib import admin
def i18n_javascript(request):
  return admin.site.i18n_javascript(request)
Svarte 02/01/2009 kl. 22:53
kilden bruker

stemmer
10

Fra og med Django 1.2 RC1, hvis du bruker Django admin datovelgeren widge triks, har følgende å bli lagt til malen, eller vil du se kalenderen ikonet url blir referert via "/ mangler-admin-media-prefiks /".

{% 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>
Svarte 12/05/2010 kl. 11:03
kilden bruker

stemmer
10

Jeg finner meg selv refererer dette innlegget mye, og funnet ut at dokumentasjonen definerer en litt mindre Hacky måte å overstyre standard widgets.

( Du trenger ikke å overstyre ModelForm er __init__ metode )

Men du fortsatt trenger å koble dine JS og CSS hensiktsmessig som Carl nevner.

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

Referanse felttyper for å finne standard skjemafeltene.

Svarte 08/09/2009 kl. 06:42
kilden bruker

stemmer
9

Hodet mitt kode for 1,4 versjon (noen nye og noen fjernet)

{% 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 %}
Svarte 12/07/2012 kl. 07:06
kilden bruker

stemmer
7

Utfyller svaret ved Carl Meyer, ønsker jeg å kommentere at du trenger å sette som header i noen gyldig blokk (inne i header) i malen.

{% 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 %}
Svarte 05/04/2009 kl. 20:02
kilden bruker

stemmer
6

(Jeg prøver å kommentere folk foreslå å rulle sin egen kalender-widget, men enten jeg ikke ser kommentaren knappen, eller jeg har ikke nok rep.)

Hva skjedde med TØRT ? Jeg tror det ville være best å gjenbruke admin widget, men kanskje det bør skilles fra admin, og enklere å bruke. Takk for denne informasjonen anyways.

Svarte 19/07/2010 kl. 21:38
kilden bruker

stemmer
5

Jeg har endelig klart å få denne widgeten arbeider på dev server, bare for å ha det bryte på utplassering. Jeg endelig besluttet at det ikke var verdt shoehorning på nettstedet mitt, og skrev min egen widget. Det er ikke så fleksibelt, men det vil sannsynligvis fungere godt for mange: http://www.copiesofcopies.org/webl/?p=81

Svarte 26/04/2010 kl. 22:17
kilden bruker

stemmer
5

Nedenfor vil også fungere som en siste utvei hvis de ovennevnte mislyktes

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

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

Samme som

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

    class Meta:
        model = Payments

sette dette i din forms.py from django.forms.extras.widgets import SelectDateWidget

Svarte 07/03/2010 kl. 16:09
kilden bruker

stemmer
3

Hva med bare å tildele en klasse til widget og deretter binde den klassen til 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'

Og noen Javascript for malen:

  $(".datepicker").datepicker();
Svarte 04/02/2012 kl. 06:50
kilden bruker

stemmer
1

Oppdatert løsning og løsningen for SplitDateTime med nødvendig = False :

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

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

urls.py

(r'^admin/jsi18n/', 'django.views.i18n.javascript_catalog'),
Svarte 02/12/2009 kl. 14:29
kilden bruker

stemmer
0

Min Django Setup: 1.11 Bootstrap: 3.3.7

Siden ingen av svarene er helt klart, er jeg dele min mal kode som presenterer ingen feil i det hele tatt.

Top Halvparten av malen:

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

Nedre halvdel:

<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 %}
Svarte 11/03/2019 kl. 10:22
kilden bruker

stemmer
0

For Django> = 2.0

Merk: Bruk av admin widgets for date-time felt er ikke en god idé som admin style-sheets kan komme i konflikt med stedet stil-ark i tilfelle du bruker bootstrap eller andre CSS rammeverk. Hvis du bygger din side på bootstrap bruke min bootstrap-datepicker widget django-bootstrap-datepicker-plus .

Trinn 1: Legg javascript-catalogURL til prosjektet (ikke app) urls.pyfil.

from django.views.i18n import JavaScriptCatalog

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

Trinn 2: Legg nødvendige Javascript / CSS ressurser i malen.

<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 #}

Trinn 3: Bruk admin widgets for date-time input felt i 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,
        }
Svarte 17/08/2018 kl. 10:36
kilden bruker

stemmer
0

Jeg bruker dette, det er flott, men jeg har 2 problemer med malen:

  1. Jeg ser kalenderikonene to ganger for hvert innlevert i malen.
  2. Og for TimeField har jeg ' Skriv inn en gyldig dato. '

    Her er et skjermbilde av Form

models.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)

forms.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']
Svarte 21/07/2018 kl. 19:26
kilden bruker

stemmer
0

I Django 10. mittprosjekt / urls.py: i begynnelsen av urlpatterns

  from django.views.i18n import JavaScriptCatalog

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

I min 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>
Svarte 09/10/2016 kl. 17:39
kilden bruker

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more