Wie Sie eine JQuery Datepicker mit der Django template language

Sah dieser link und fand einige helfen, aber ich Frage mich, wie kann ich wählen, um ein JQueryUI Datepicker-widget für eine DateField-ich habe in meinem models.py

models.py

from django.db import models

class EModel(models.Model):

    date = models.DateField(blank=False)

forms.py

from django import forms
from models import EModel

class EForm(forms.ModelForm):
    class Meta:
        model = EModel

form.html - Wie Django macht meine form. Nicht in der admin-Seite

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Form</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css" />
</head>
<body>
    <form action="" method="post">{% csrf_token %}
        {{ form.date }} <!-- ***** -->
        <!-- The rest of my form -->
    </form>
</body>

Ich hoffe auf einen Weg zu machen, mein "date" Modell-Feld " Rendern als JQueryUI Datepicker-widget, aber ich suchte herum und fand keinen Weg, die Verknüpfung der beiden (in meinem Fall).

LÖSUNG

In meinem forms.py

from django import forms
from models import EModel

class EForm(forms.ModelForm):
    class Meta:
        model = EModel
        widgets = {
            'date' : forms.DateInput(attrs={'type':'date'})
        }

InformationsquelleAutor Zac | 2013-08-07

9

Bearbeiten Sie Ihre Datum-widgets-Attributen in Ihrem Modell bilden, indem Sie Ihnen die Klasse".datepicker', wie das ist, was die JQuery-datepicker Aussehen wird. So Ihr ModelForm wird:
```
class EForm(forms.ModelForm):
    class Meta:
        model = EModel
        widgets = {'date': DateInput(attrs={'class': 'datepicker'})}
```
Dokumentation hier.

Die Lösung war eine fast fix. Ich hatte diese Zeile stattdessen: widgets = {'date': Formen.DateInput(attrs={'type':'date'}) }
Ah OK, ich war mir nicht sicher, wie Sie konfiguriert werden mussten, Ihre JQuery-DatePicker - ich habe immer nur die Klasse datepicker, als ich mehr als ein input-Feld im Formular benutzt, in den meisten Fällen.

InformationsquelleAutor professorDante

Ich verwende den folgenden code und es funktioniert gut für mich. Ich habe bereits erwähnt alle Dateien für dieses Projekt,

models.py

    from django.db import models
    class EModel(models.Model):
        date = models.DateField(blank=False)

forms.py

    from django import forms
    from testApp.models import EModel
    class EForm(forms.ModelForm):
        class Meta:
            model = EModel
            widgets = {'date': forms.DateInput(attrs={'class': 'datepicker'})}

form.html

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Form</title>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
        <link rel="stylesheet" href="/resources/demos/style.css" />
        <script>
        $(function() {
            $( "#id_date" ).datepicker();
        });
        </script>
    </head>
    <body>
        <form action="/datepickerview/" method="post">{% csrf_token %}
            <!--{{ form.date }} -->
            <p>Date: <input name='date' type="text" id="id_date"></p>
            <!-- The rest of my form -->
            <input type="submit" value="login" />
        </form>
    </body>

views.py

    from django.shortcuts import render
    from django.http import HttpResponse
    from django.template import Context
    from django.shortcuts import render_to_response
    from django.http import HttpResponseRedirect
    from django.core.context_processors import csrf
    from django.template import RequestContext
    from forms import EForm
    def datepickerview(request):
        # Get the context from the request.
        context = RequestContext(request)
        # A HTTP POST?
        if request.method == 'POST':
            form = EForm(request.POST)
            # Have we been provided with a valid form?
            if form.is_valid():
                form.save(commit=True)
                return HttpResponse("Successfully added the date to database");
            else:
                # The supplied form contained errors - just print them to the terminal.
                print form.errors
        else:
            # If the request was not a POST, display the form to enter details.
            form = EForm()
        return render_to_response('form.html', {'form': form}, context)

urls.py

    from django.conf.urls import patterns, include, url
    from django.contrib import admin
    admin.autodiscover()
    urlpatterns = patterns('',
    url(r'^datepickerview/$', 'testApp.views.datepickerview'),
    )

admin.py

    from django.contrib import admin
    from testApp.models import EModel
    admin.site.register(EModel)

stackoverflow.com/editing-help

InformationsquelleAutor dilpreet

Am besten erstellen Sie ein neues widget in eine widgets.py Datei in Ihre app:

Hier ein Beispiel von mir für einen color-picker:

-- widgets.py --

from django import forms
from django.conf import settings
from django.utils.safestring import mark_safe

class ColorPickerWidget(forms.TextInput):
    class Media:
        css = {
            'all': (
                settings.STATIC_URL + 'colorpicker/css/colorpicker.css',
            )
        }
        js = (
            settings.STATIC_URL + 'js/jquery-1.8.3.min.js',
            settings.STATIC_URL + 'colorpicker/js/colorpicker.js',
        )

    def __init__(self, language=None, attrs=None):
        self.language = language or settings.LANGUAGE_CODE[:2]
        super(ColorPickerWidget, self).__init__(attrs=attrs)

    def render(self, name, value, attrs=None):
        rendered = super(ColorPickerWidget, self).render(name, value, attrs)
        return rendered + mark_safe(u'''
            <script type="text/javascript">
                jQuery('#id_%s').css("background-color", "#"+jQuery('#id_%s').val());
                jQuery('#id_%s').ColorPicker({
                    onSubmit: function(hsb, hex, rgb, el) {
                        jQuery(el).val(hex);
                        jQuery(el).css("background-color", "#"+hex);
                        jQuery(el).ColorPickerHide();
                    },
                    onBeforeShow: function () {
                        code = this.value
                        if (code.length==3) code = code.charAt(0)+code.charAt(0)+code.charAt(1)+code.charAt(1)+code.charAt(2)+code.charAt(2);
                        jQuery(this).ColorPickerSetColor(code);
                    }
                }).bind('keyup', function(){
                    el = jQuery(this);
                    code = el.val();
                    hex = '#'+code;
                    var isOk  = /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(hex);
                    if (isOk) {
                        el.css("background-color", hex);
                        if (code.length==3) code = code.charAt(0)+code.charAt(0)+code.charAt(1)+code.charAt(1)+code.charAt(2)+code.charAt(2);
                        el.ColorPickerSetColor(code);
                    }
                    else if (code=="") el.css("background-color", "");
                });
            </script>
            ''' % (name, name, name))

--- views.py ---

from django import forms ColorPickerWidget
from myapp.widgets import
class EditBackgroundForm(forms.Form):
    background = forms.CharField(max_length=10, widget= ColorPickerWidget(), required = False, label="Background color")

In Ergänzungen, Sie können auch ein benutzerdefiniertes Formular erstellen Feld mit widgets, und diesen seinen clean() Methode.

InformationsquelleAutor Ricola3D

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.