2016-06-21 50 views
0

在我的Django應用程序中,我使用的是bootstrap-datepicker。用戶選擇一個日期,然後日期在Ajax post請求中傳遞給/ check/view,然後sub_template重新載入檢索的數據。Django eternicode bootstrap-datepicker無法在手機上工作

一切工作就像在桌面上的魅力,但它似乎像datepicker根本無法在手機上工作。我已經在iPhone 6s,android手機和windows phone(所有默認瀏覽器)上測試過它。當我按日期時,它只是不以任何方式迴應。

這是我的主網頁的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> 

子頁面的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); 
     } 
     }); 
    }); 

任何想法,爲什麼它不工作?

回答

0

因此很明顯,這個div:

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

是造成問題。當我剛剛刪除col-lg-4之後的所有類時(它們不是必需的),一切正常。

相關問題