CODEWITHSUNDEEP
djangowidgetdatetimepickerbootstrap-datetimepicker
Pawel Kam
Pawel Kam

Reputation: 2134

Unresponsive django-bootstrap3-datetimepicker (not showing calendar)

As a beginner I often struggle with understanding the connections between Python-Django, html, javascript and css.

The problem at hand is this: I'm trying to implement DateTimePicker widget from django-bootstrap3-datetimepicker-2.

Since this library does not include js/css assets, I started by implementing datetimepicker without backend involvement just to see if I loaded all static files etc. correctly. Thus, I added this example to 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>

Everything worked as intended, so I tried to implement datetimepicker as a widget from django forms: 

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

I also wanted to benefit from form wizard (namely SessionWizardView from formtools.wizard), so I output the above mentioned form into html like this:

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

However, the widget is not responsive (the calendar window isn't showing, the glyphicon-calendar icon doesn't do anything). When I leave the test datetime picker (the recently-working one), both break.

Developer's console prints the following:

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)

I'm baffled, I don't even know where to look. Do you know any articles or documentation that would explain this to me? Please advise.

I went through some githubs projects and they don't seem to have anything more than I have (especially I was worried that it was something with templatetags, but most have just {% load bootstrap3 %}, some have {% load static %}, which I also have). I've also tried this suggestion.

Upvotes: 2

Views: 1010

Answers (1)

rustyshackleford
rustyshackleford

Reputation: 731

Change the Django form's format to dd/MM/YYYY. Additionally, remove pickTime from the form. I believe those were changed in an earlier release; perhaps the example you used was outdated.

Upvotes: 2

Related Questions