Associer un calendrier dynamique a un DateField

Bonjour,

J'essaie en vain de rajouter un calendrier à coté de mes DateField dans mes formulaires d'ajout et de modifications afin de ne pas avoir a les taper a la main et pile comme le demande le patron de date a chaque fois. Pour l'instant j'ai suivi cette lancée:

• Créer un formulaires
• Créer une CBV CreateView
• Associer le formulaire a ma CBV
• Pleurer sur mon sort devant tout les posts datant de 2011 qui m'on l'air infructueux

Lien exploré jusqu'ici:

• http://stackoverflow.com/questions/15803257/datefield-with-calendar-django
• http://stackoverflow.com/questions/38601/using-django-time-date-widgets-in-custom-form

Le problème vient apparemment des ajout dans le header a faire au sein du template. Je pense que certains lien on changer ou que certaines fonctions on était deprecated… Malheureusement je n'arrive pas a m'en sortir.

Voici mon code.

Forms.py

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

from django import forms
from django.db import models
from django.contrib.admin.widgets import AdminDateWidget
from django.forms import widgets
from app.finance.models import Bourse



class BourseForm(forms.ModelForm):
    class Meta:
        model = Bourse
        fields = ['dateSoumission']

    def __init__(self, *args, **kwargs):
        super(BourseForm, self).__init__(*args, **kwargs)
        self.fields['dateSoumission'].widget = AdminDateWidget()

views.py

1
2
3
4

#For create a new Bourse
class BourseCreate(generic.CreateView):
    model = Bourse
    form_class = BourseForm

bourse_form.html -> Template de la CBV par défaut

1
2
3
4
5
6
7
8
9

{% load staticfiles %}

{% block content %}
    <h1>{% trans "Bourses" %}</h1>
    <form method="post">{% csrf_token%}
        {{ form.as_p }}
        <input type="submit" value="Submit"/>
    </form>
{% endblock %}

Autant je serais très intéresser a savoir comment finir avec ce calendrier, autant je pourrais aussi vous remercier d'une solution alternative (input spécial date en trois sous partie clickable et incrémentable avec les flèches du clavier par exemple).

Enfin bref je ne suis pas fermé.

<input type="date"> tout simplement, non ?

Huum, j'aime ce que tu dit la!!

C'est assez intéressant bien qu’apparemment mon Firefox ne le gère pas encore, ce qui enlève bon nombre d'utilisateur aujourd'hui…

Cependant Django fait que je n'ai pas a taper d'HTML dans le cas présent, c'est lui même qui génère le formulaire directement depuis mon modèle de BDD. La seule solution serait d'associer ce qu'on appelle un "Widget" a mon DateField.

Mais intéressant tout de même, je m'en servirai assurément en PHP. Un moyen de le faire tourner sur Firefox tout de même, ou juste attendre?

Bah ma méta classe me permet de dire sur quel modèle je veut faire mon formulaire et surtout me permet de choisir mes fields a affiche. Le reste je le fait dans mon init, qui est justement la pour initialiser.

1
2
3

class Meta:
        model = Bourse
        fields = ['dateSoumission']

Dans tout les cas je te remercie de ta réponse, je l'essayerai dès demain matin première heure! Je te tient au courant dans tout les cas.

J'ai du modifier un peu ton code:

• dateSoumission = fields.DateField() est en réalité dateSoumission = forms.DateField().
• fields = ['dateSoumission'] est obligatoirement défini.

Mais bien que ce code m'affiche le formulaire, je n'ai toujours rien comme calendrier ou comme aide a la saisie de date…

Le problème reste donc entier. Si quelqu'un a une autre idée je suis preneur!

1
2
3
4
5
6
7
8
9

class BourseForm(forms.ModelForm):
    class Meta:
        model = Bourse
        fields = ['dateSoumission']
        widgets = {
            'dateSoumission' : forms.DateInput(attrs={'type':'date', 'class':'datepicker'})
        }

    dateSoumission = forms.DateField()

PS: J'ai oublié de dire a Artragis que son second lien est inactif, je n'ai donc pas pu le lire.

J'ai copié le lien Google plutôt que le lien direct, c'est pour ça. Il te suffit de chercher jqueryui datepicker et de mettre les paramètres que je t'ai montré dans ton code pour que ça marche. Je mettrai le lien correct quand j'aurai accès a un ordi.

Merci artragis, je commence a comprendre ce que tu essaye de me faire faire. Mais j'ai encore du mal apparemment.

Toujours un formulaire qui marche mais sans aucun datePicker…

Voici mon code actuel:

forms.py

1
2
3
4
5
6
7
8
9

class BourseForm(forms.ModelForm):
    class Meta:
        model = Bourse
        fields = ['dateSoumission']
        widgets = {
            'dateSoumission' : forms.DateInput(attrs={'type':'date', 'class':'datepicker'})
        }

    dateSoumission = forms.DateField()

Template

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

{% block extrahead %}
    <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>
{% endblock %}
{% block title %}{% trans "Stock exchanges" %}{% endblock %}
{% block content %}
    <h1>{% trans "Stock exchanges" %}</h1>
    <form method="post">{% csrf_token%}
        {{ form.as_p }}
        <input type="submit" value="Submit"/>
    </form>
{% endblock %}

Le JS en dehors du head marche déjà beaucoup mieux effectivement.

Ensuite un grand merci d'avoir relever ce morceau de script car effectivement je n'avais pas fait le rapprochement du mot class dans le forms.py avec les class HTML.

Enfin le "class" du forms.py ne marche pas puisque mon HTML rendu est:

1

<input id="id_dateSoumission" name="dateSoumission" type="text">

Cependant, en modifiant $( ".datePicker" ).datepicker(); par $( "#id_dateSoumission" ).datepicker();, tout rentre dans l'ordre.

Merci infiniment!!