2017-10-15 37 views
1

En tant que débutant, j'ai souvent du mal à comprendre les connexions entre Python-Django, html, javascript et css.Ne répond pas django-bootstrap3-datetimepicker (ne pas afficher le calendrier)

Le problème à résoudre est le suivant: J'essaie d'implémenter le widget DateTimePicker de django-bootstrap3-datetimepicker-2. Comme cette bibliothèque n'inclut pas les ressources js/css, j'ai commencé par implémenter datetimepicker sans implication backend juste pour voir si j'ai correctement chargé tous les fichiers statiques etc. Ainsi, j'ai ajouté this example au modèle html:

<div class="container"> 
    <div class="row"> 
     <div class="col-sm-6"> 
      <div class="form-group"> 
       <div class="input-group date" id="datetimepicker1"> 
        <input type="text" class="form-control"> 
        <span class="input-group-addon"> 
         <span class="glyphicon glyphicon-calendar"></span> 
        </span> 
       </div> 
      </div> 
     </div> 
     <script type="text/javascript"> 
      $(function() { 
       $('#datetimepicker1').datetimepicker(); 
      }); 
     </script> 
    </div> 
</div> 

Tout a fonctionné comme prévu, j'ai donc essayé de mettre en œuvre datetimepicker comme un widget de formes django:

class FooForm(forms.Form): 
    pick_a_date = forms.DateTimeField(
     widget=DateTimePicker(options={ 
      "format": "YYYY-MM-DD", 
      "pickTime": False} 
     )) 

Je voulais aussi profiter de l'assistant de formulaire (à savoir SessionWizardView de formtools.wizard), sortie donc je le formulaire ci-dessus mentionné en html comme ceci:

<form action="" method="post" role="form">{% csrf_token %} 
    <table> 
    {{ wizard.management_form }} 
    {% if wizard.form.forms %} 
     {{ wizard.form.management_form }} 
     {% for form in wizard.form.forms %} 
      {{ form }} 
     {% endfor %} 
    {% else %} 
     {{ wizard.form }} 
    {% endif %} 
    </table> 

Cependant, le widget n'est pas responsab ive (la fenêtre du calendrier ne s'affiche pas, l'icône glyphicon-calendar ne fait rien). Lorsque je quitte le sélecteur de date/heure de test (celui qui fonctionne récemment), les deux se brisent.

imprime console de développeurs les éléments suivants:

Uncaught TypeError: option pickTime is not recognized! 
    at Boolean.<anonymous> (bootstrap-datetimepicker.js:1440) 
    at Function.each (jquery-2.1.1.min.js:2) 
    at Object.picker.options (bootstrap-datetimepicker.js:1436) 
    at dateTimePicker (bootstrap-datetimepicker.js:2276) 
    at HTMLDivElement.<anonymous> (bootstrap-datetimepicker.js:2309) 
    at Function.each (jquery-2.1.1.min.js:2) 
    at n.fn.init.each (jquery-2.1.1.min.js:2) 
    at n.fn.init.$.fn.datetimepicker (bootstrap-datetimepicker.js:2304) 
    at HTMLDocument.<anonymous> ((index):154) 
    at j (jquery-2.1.1.min.js:2) 

Je suis déconcerté, je ne sais même pas où chercher. Connaissez-vous des articles ou des documents qui pourraient m'expliquer cela? S'il vous plaît donnez votre avis. Je suis allé à travers quelques projets githubs et ils ne semblent pas avoir plus que ce que j'ai (surtout j'étais inquiet que c'était quelque chose avec templatetags, mais la plupart ont juste {% load bootstrap3%}, certains ont {% charge statique%}, que j'ai aussi). J'ai également essayé ce suggestion.

+0

Comment avez-vous installé le paquet? Y a-t-il une sortie dans la console du navigateur? – vipertherapper

+0

pip install git + https: //github.com/tutorcruncher/django-bootstrap3- datetimepicker (cette fourche prend en charge Django 1.11). La console du navigateur indique 'Uncaught TypeError: l'option pickTime n'est pas reconnue!' Je vais ajouter le tout à la poste. –

+0

Pouvez-vous supprimer le paquet que vous avez installé, puis le réinstaller en utilisant 'pip install django-bootstrap3-datetimepicker-2'? – vipertherapper

Répondre

1

Modifiez le format de la forme Django en dd/MM/YYYY. En outre, supprimez pickTime du formulaire. Je crois que ceux-ci ont été modifiés dans une version antérieure; Peut-être que l'exemple que vous avez utilisé était obsolète.

+0

@Pawel en changeant le format en "aaaa-mm-jj" peut en fait désactiver "hasTime". Essayez ça. – vipertherapper

+0

Malheureusement les deux ordres de lettres et lettres majuscules doivent rester. De plus, de temps en temps, je recevais des erreurs de validation aléatoires, donc temporairement je me suis mis à "formater": "AAAA-MM-JJ HH: mm". Je serais content pour une solution à ce problème, cependant. –

+0

J'essaie de comprendre. Apparemment, les heures/minutes qui apparaissent sont déterminées par le format. – vipertherapper