Associer un calendrier dynamique a un DateField

Possiblement avec AdminDateWidget()

L'auteur de ce sujet a trouvé une solution à son problème.
Auteur du sujet

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:

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

J’adorerais changer le monde, mais ils ne veulent pas me fournir le code source…

+0 -0
Auteur du sujet

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?

J’adorerais changer le monde, mais ils ne veulent pas me fournir le code source…

+0 -0
Staff

Cette réponse a aidé l'auteur du sujet

ta classe de formulaire est extrêmement bizarre. Pourquoi y a-t-il une métaclasse que finalement tu n'utilises pas avec de vraies données utiles?

Ensuite, de ce que j'ai vu, de base django propose des DateField et DateWidget.

Ce qui te permettra de modifier ta métaclasse pour jouer avec les attributs de tes widgets pour par exemple activer JQueryUI Dapepicker Plugin

1
2
3
4
5
6
7
class BourseForm(forms.ModelForm):
    class Meta:
        model = Bourse
        widgets = {
            'dateSoumission' : forms.DateInput(attrs={'type':'date', 'class':'datepicker'})
        }
     dateSoumission = fields.DateField()
+0 -0
Auteur du sujet

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’adorerais changer le monde, mais ils ne veulent pas me fournir le code source…

+0 -0
Auteur du sujet

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.

Édité par Sanoc

J’adorerais changer le monde, mais ils ne veulent pas me fournir le code source…

+0 -0
Auteur du sujet

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

Édité par Sanoc

J’adorerais changer le monde, mais ils ne veulent pas me fournir le code source…

+0 -0
Staff

Cette réponse a aidé l'auteur du sujet

le champ texte de base s'affichet-il?

Il est fortement conseillé de ne pas mettre les JS dans le head mais en fin de body. ensuite, en fin de page il te faudra ajouter un script qui dit ceci :

1
2
3
<script>
$( ".datePicker" ).datepicker();
</script>

en effet la transformation d'un champ texte en calendrier n'est pas implicite.

+0 -0
Auteur du sujet

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

J’adorerais changer le monde, mais ils ne veulent pas me fournir le code source…

+0 -0
Vous devez être connecté pour pouvoir poster un message.
Connexion

Pas encore inscrit ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte