Comment utiliser un Datepicker de JQuery avec le langage de template de Django

Regardé ce lien et trouvé de l'aide mais je me demande comment je peut choisir d'utiliser un JQueryUI composant pour un DateField j'ai dans mon 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 - Comment Django rend ma forme. Pas dans la page admin

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

Je suis en espérant un moyen de faire de mon 'date' modèle de champ est rendu comme un JQueryUI composant, mais j'ai cherché et trouvé aucun moyen de lier les deux (dans mon cas).

SOLUTION

Dans mon 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'})
        }

OriginalL'auteur Zac | 2013-08-07

  1. 9

    Modifier votre date de widgets attributs dans votre modèle de formulaire, en leur donnant la classe".datepicker", comme c'est ce que le datepicker de JQuery vont chercher. Si votre ModelForm devient:

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

    Documentation ici.

    La solution était presque correctif. J'avais utilisé cette ligne à la place: les widgets = {"date": les formulaires.DateInput(attrs={'type':'date'}) }
    Ah OK, je n'étais pas sûr de savoir comment vous aviez configuré votre DatePicker JQuery - je toujours utiliser la classe datepicker, comme j'ai plus d'un champ de saisie sur le formulaire de l'utiliser dans la plupart des cas.

    OriginalL'auteur professorDante

  2. 2

    J'utilise le code suivant et il fonctionne très bien pour moi. J'ai mentionné tous les fichiers de ce projet,

    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

    OriginalL'auteur dilpreet

  3. 1

    Le mieux est de créer un nouveau widget dans une widgets.py fichier dans votre application:

    Voici un exemple de la mine, pour un sélecteur de couleurs:

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

    Dans les ajouts, vous pouvez également créer un champ de formulaire personnalisé avec votre gadget, et annuler son clean() méthode.

    OriginalL'auteur Ricola3D