Django eternicode bootstrap-datepickerが電話で動作しません

Question

私のDjangoアプリケーションでは、bootstrap-datepickerを使用しています。ユーザーが日付を選択し、Ajaxのpostリクエストで/ check/viewに日付が渡された場合、検索されたデータでsub_templateがリロードされます。

すべてはデスクトップ上の魅力のように機能しますが、電話ではdatepickerはまったく機能しないようです。私はIphone 6s、アンドロイドの携帯電話とWindowsの電話（すべてのデフォルトのブラウザ）でそれをテストしました。私が日付を押すと、それはちょうどどんな方法でも反応しません。

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

サブページの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> 

メインページスクリプト：

$('#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); 
     } 
     }); 
    }); 

それが動作しない理由を任意のアイデアここで

は私のメインページのHTMLのですか？

Answer 1

ので、どうやらこれはDIV：

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

が問題を引き起こしていました。私がcol-lg-4の後にすべてのクラスを削除したとき（それらは必要ではない）、すべて正常に動作しています。