Django eternicode bootstrap-datepicker 不适用于手机

Question

在我的 Django 应用程序中，我使用 bootstrap-datepicker。用户选择一个日期，然后在 Ajax post 请求中将日期传递给 /check/ view，然后 sub_template 重新加载检索到的数据。

在台式机上一切正常，但似乎日期选择器在 phone 上根本不起作用。我已经在 Iphone 6s、android phone 和 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);
         }
        });
    });

知道为什么它不起作用吗？

Answer 1

显然这个 div:

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

导致问题。当我刚刚删除 col-lg-4 之后的所有类时（无论如何它们都不是必需的）一切正常。

Django eternicode bootstrap-datepicker 不适用于手机

Django eternicode bootstrap-datepicker doesn't work on phones

django

bootstrap-datepicker