修复 bootstrap 日期选择器日历位置

Question

在我的网站上，出于某种原因，日期选择器日历位于本应位于下方的位置，因此它阻碍了输入。我怎样才能固定它的位置？

http://test.rocknraw.ru/orders

Answer 1

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

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

Answer 2

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

其次 - 如果您的问题无法自行解决，请尝试创建一个 div 或弹出窗口，并在 div 中提供一个输入日期时间选择器来替换位置。

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

代码：

$('#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 日期选择器日历位置

Fix bootstrap datepicker calendar position

datetimepicker

twitter-bootstrap

yii2