Question

在我的网站上由于某种原因日期选择器日历位于较低的位置，因此它会阻碍输入。我该如何确定其立场？

http://test.rocknraw.ru/orders

Answer 1

您可以尝试覆盖.bootstrap-datetimepicker-widget CSS类并添加margin-bottom属性。

编辑：我正在查看您网页中的控件，.datepicker类有一个margin-top: 35px;删除该属性，它将处于正确的位置。

Answer 2

首先 - 我不知道你的代码。

第二 - 如果您的问题无法解决，请尝试创建一个div或popover，并在该div中输入一个输入日期时间选择器来替换位置。

最终 - 这是我使用我的第二个参数的代码。

代码：

$('#date_time').datetimepicker({
            locale: 'id',
            toolbarPlacement: 'bottom',
            showTodayButton: true,
            showClose: true,
            showClear: true,
            allowInputToggle: true,
            format: 'DD/MM/YYYY HH:mm:ss',
            icons: {
            time: 'glyphicon glyphicon-time',
            date: 'glyphicon glyphicon-calendar',
            up: 'glyphicon glyphicon-chevron-up',
            down: 'glyphicon glyphicon-chevron-down',
            previous: 'glyphicon glyphicon-arrow-left',
            next: 'glyphicon glyphicon-arrow-right',
            today: 'glyphicon glyphicon-home',
            clear: 'glyphicon glyphicon-trash',
            close: 'glyphicon glyphicon-remove'
            },
            tooltips: {
            today: 'Hari ini',
            clear: 'Hapus masukan',
            close: 'Tutup',
            selectMonth: 'Pilih bulan',
            prevMonth: 'Bulan sebelumnya',
            nextMonth: 'Bulan berikutnya',
            selectYear: 'Pilih tahun',
            prevYear: 'Tahun sebelumnya',
            nextYear: 'Tahun berikutnya',
            selectDecade: 'Pilih dasawarsa',
            prevDecade: 'Dasawarsa sebelumnya',
            nextDecade: 'Dasawarsa berikutnya',
            prevCentury: 'Abad sebelumnya',
            nextCentury: 'Abad berikutnya',
            pickHour: 'Pilih jam',
            incrementHour: 'Jam selanjutnya',
            decrementHour: 'Jam sebelumnya',
            pickMinute: 'Pilih menit',
            incrementMinute: 'Menit selanjutnya',
            decrementMinute: 'Menit sebelumnya',
            pickSecond: 'Pilih detik',
            incrementSecond: 'Detik selanjutnya',
            decrementSecond: 'Detik sebelumnya',
            togglePeriod: 'Ubah am/pm',
            selectTime: 'Pilih waktu'
            }
        });
        $('#calendar-status').click(function(event) {
        $('.elmahbub-popover-bottom').css('width', 'auto').slideToggle().after().parent().css('position', 'relative');
    });

和html：

<button class="btn-xs pull-right margin-secondary btn-border bg-white icon-attachment" type="button" data-toggle="tooltip" data-placement="bottom" id="calendar-status" title="Tanggal"><b class="glyphicon glyphicon-calendar grey fontsize-xsmall"></b></button>
<div class="input-group date elmahbub-date-time-picker elmahbub-popover-bottom">
                <div align="center">
                <span class="fontsize-xsmall black roboto margin-bottom10">Tanggal dan waktu</span>
                <input id="date_time" type="text" name="tanggal_status" placeholder="Masukkan tanggal dan waktu" class="form-control fontsize-xsmall" style="height:28px">
                </div>
                </div>

Answer 3

您应该使用 orientation 选项。看看它的 documentation

修复bootstrap datepicker日历位置

3 个答案: