Django eternicode bootstrap-datepicker funktioniert nicht auf Handys

Question

In meiner Django App benutze ich bootstrap-datepicker. Der Benutzer wählt ein Datum aus, dann wird das Datum in der Ajax-Postanforderung an/check/view übergeben, dann wird sub_template mit den abgerufenen Daten erneut geladen.

Alles funktioniert wie ein Charme auf dem Desktop, aber es scheint, als würde Datepicker überhaupt nicht funktionieren. Ich habe es auf Iphone 6s, Android Phone und Windows Phone (alle Standard-Browser) getestet. Wenn ich das Datum drücke, reagiert es einfach nicht.

Hier ist meine Haupt-Seite html:

<div class="container"> 
    <div class="row text-center"> 
     <h2>Availability</h2> 
    </div> 
     <hr> 
     <div class="row text-center hidden-xs "> 
     </div> 

     <div class="row row-pad-30 text-center"> 
      <div class="col-lg-1 md-hidden"></div> 
      <div class="col-lg-4 col-md-12 col-sm-12 col-xs-12"> 
       <h3>1. Choose date</h3> 
       <form style="color: white;" class="form-date" role="form" action="" method="get"> 
        {% csrf_token %} 
        <div class="form-group" id="datepicker"> 
         <div></div> 
         <input data-date-format="YYYY-MM-DD" type="hidden" name="dt_due" id="dt_due" val=""> 
        </div> 
       </form> 
      </div> 

      <div id="refresh-div" class="timedisplay">{% include 'booking/time.html' %}</div> 
      <div class="col-lg-1 md-hidden"></div> 
     </div> 
</div> 

Unter Seite html:

<div class = "col-lg-6"> 
    <h3 class = "h3-hour">2. Choose hour</h3> 
    <div class="row row-pad-20"> 
     {% for time_list in availability_table %} 
     <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12"> 
      {% for i in time_list %} 
       <button type="submit" class="fade-in-quick btn btn-lg btn-block btn-info btn-core" value="{{ forloop.counter0 }}" name="time" id="time">{{ i.0|date:'H:i' }} do {{ i.1|date:'H:i' }}</button> 
      {% endfor %} 
     </div> 
     {% endfor %} 
    </div> 
</div> 

Hauptseite Skript:

$('#datepicker div').datepicker({ 
    language:"pl", 
    startDate: "+1d" 
}).on('changeDate', function(event) { 
    var date = event.format() 
    console.log(date); 
    $.ajax({ 
     type:'POST', 
     url: '/check/', 
     data: {'date': date, 'csrfmiddlewaretoken': $('input[name="csrfmiddlewaretoken"]').val()}, 
     success: function(data) { 
     $('#refresh-div').html(data); 
     } 
     }); 
    }); 

Jede Idee, warum es nicht funktioniert?

Answer 1

So scheint dieses div:

<div class="col-lg-4 col-md-12 col-sm-12 col-xs-12"></div> 

verursachte Probleme. Wenn ich gerade alle Klassen nach Col-lg-4 gelöscht habe (sie sind sowieso nicht notwendig), funktioniert alles korrekt.