2017-10-15 11 views
1

Als Anfänger habe ich oft Schwierigkeiten, die Zusammenhänge zwischen Python-Django, html, javascript und css zu verstehen.Nicht reagierend django-bootstrap3-datetimepicker (zeigt keinen Kalender an)

Das vorliegende Problem ist das: Ich versuche, DateTimePicker Widget von django-bootstrap3-datetimepicker-2 zu implementieren.

Da diese Bibliothek keine js/css-Assets enthält, habe ich mit der Implementierung von datetimepicker ohne Backend-Beteiligung begonnen, um zu sehen, ob ich alle statischen Dateien usw. korrekt geladen habe. So habe ich this example zu HTML-Template:

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

Alles wie geplant gearbeitet, so habe ich versucht, Datetime als Widget von django Formen zu implementieren:

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

Ich wollte auch von der Form Assistenten profitieren (nämlich SessionWizardView von formtools.wizard), so dass ich die oben erwähnte Ausgangsform in html wie folgt aus:

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

jedoch ist das nicht-Widget Respons ive (das Kalenderfenster wird nicht angezeigt, das Symbol glyphicon-calendar tut nichts). Wenn ich den Test datetime picker (den kürzlich arbeitenden) lasse, brechen beide ab.

Entwicklers Konsole druckt die folgenden:

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) 

ich verwirrt bin, ich weiß nicht einmal, wo sie suchen müssen. Kennen Sie Artikel oder Unterlagen, die mir das erklären? Bitte beraten.

Ich habe ein paar githubs-Projekte durchgesehen und sie scheinen nichts mehr zu haben als ich (vor allem hatte ich Angst, dass es etwas mit Templatetags ist, aber die meisten haben nur {% load bootstrap3%}, einige haben {% lade statisch%}, was ich auch habe). Ich habe auch dieses suggestion versucht.

+0

Wie haben Sie das Paket installiert? Gibt es irgendwelche Ausgaben in der Browser-Konsole? – vipertherapper

+0

pip install git + https: //github.com/tutorcruncher/django-bootstrap3- datetimepicker (dieser Fork unterstützt Django 1.11). Browser-Konsole sagt 'Uncaught TypeError: Option PickTime wird nicht erkannt!' Ich werde das Ganze dem Beitrag hinzufügen. –

+0

Können Sie das installierte Paket entfernen und es dann mit 'pip install django-bootstrap3-datetimepicker-2' erneut installieren? – vipertherapper

Antwort

1

Ändern Sie das Format der Django-Form in dd/MM/YYYY. Entfernen Sie außerdem pickTime aus dem Formular. Ich glaube, diese wurden in einer früheren Version geändert; vielleicht war das von Ihnen verwendete Beispiel veraltet.

+0

@Pawel die Änderung des Formats zurück zu 'yyyy-mm-dd' kann tatsächlich' hasTime' deaktivieren. Versuch das. – vipertherapper

+0

Leider müssen sowohl die Reihenfolge der Buchstaben als auch die Großbuchstaben bleiben. Außerdem habe ich von Zeit zu Zeit zufällige Validierungsfehler bekommen, daher habe ich vorübergehend "formatieren": "JJJJ-MM-TT HH: mm". Ich würde mich jedoch über eine Lösung für dieses Problem freuen. –

+0

Ich versuche es herauszufinden. Anscheinend wird die angezeigte Stunden/Minuten durch das Format bestimmt. – vipertherapper