2016-06-21 1 views
0

Django 앱에서 bootstrap-datepicker를 사용하고 있습니다. 사용자가 날짜를 선택하면 Ajax post 요청에서/check/view로 날짜가 전달되고, 검색된 데이터로 sub_template이 다시로드됩니다.Django eternicode bootstrap-datepicker가 휴대폰에서 작동하지 않습니다

모든 것이 데스크톱의 매력처럼 작동하지만, 전화에서 datepicker가 전혀 작동하지 않는 것 같습니다. 내가 아이폰 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입니까?

답변

0

그래서 분명히이 div에 :

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

일으키는 문제였다. 방금 col-lg-4 이후에 모든 클래스를 삭제하면 (어쨌든 필요하지 않음) 모든 것이 올바르게 작동합니다.