Question

我已经为Bootstrap实现了这个datetimepicker：http://www.malot.fr/bootstrap-datetimepicker/

它可以在我的电脑上正常工作，但是当我从手机浏览器打开它时，选择器不会显示在该字段下。我必须一直滚动到页面底部才能看到它。

此外，未禁用输入字段。点击它会调出键盘，并且可以手动输入文本（我不希望这样做）。我想我可以在代码中禁用它，但在示例中它看起来应该默认禁用它？

我很快会发布更多代码，但如果有人已经知道可能存在什么问题请告诉我。谢谢:)）

    <div class="form-group">
        <label for="startpicker" class="col-sm-1 control-label">Start:</label>
        <div class="col-sm-3">
            <div class='input-group date'>
                <input type='text' name="start" class="form-control datepicker" id="startpicker"/>
                <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
            </div>
        </div>
    </div>


    <div class="form-group">
        <label for="sluttpicker" class="col-sm-1 control-label">Slutt:</label>

        <div class="col-sm-3">
            <div class='input-group date'>
                <input type='text' name="slutt" class="form-control datepicker" id="sluttpicker" />
                <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
            </div>
        </div>
    </div>

    <script type="text/javascript">
    $(function () {
        $('.datepicker').datetimepicker(
            {
                format: "dd.mm kl.hh:ii",
                autoclose: "true",
                todayBtn: "true",
                minuteStep: 15,
                pickerPosition: "bottom-left"

            }
        );


        $('.selectpicker').selectpicker({
            style: "btn-primary"
        });

    });
    </script>

Answer 1

也许，您应该尝试在col-sm-3 col-xs-3内的div上使用课程<div class="form-group">替换课程{{1}}

Answer 2

我知道这已经很晚了但是一个很好的选择是使用data-date-container="#datepicker-container"然后创建一个空的div，其id与data-date-container的名称相匹配，所以在这种情况下，它的id将是datepicker-container

Datetimepicker显示在页面底部，而不是在输入字段下

2 个答案: