javascript - 为什么 DateTimePicker 的日历不弹出？

Question

我正在使用 datetimepicker，每当我将 HTML 放在数据表 HTML 之上时，日历就会显示出来。但是当我把它作为一个标题时，我可以用它过滤数据表。日历不显示，可能隐藏在数据表后面。可以做些什么来解决这个问题？

   $.filterTable($orderTable, '#filterButton');
    $.filterTable($orderTable, 'button.filterButton');

    $('#devicetimestamp').daterangepicker({
        singleDatePicker: true,
        locale: {
            format: 'DD-MM-YYYY',
            daysOfWeek: weekdays,
            monthNames: months,
            applyLabel: $labelOk,
            cancelLabel: $labelCancel
        },
        showISOWeekNumbers: true,
        showDropdowns: true,
        minDate: "01/01/2015",
        autoUpdateInput: false,
        autoApply: true
    });
    $('#devicetimestamp').on('apply.daterangepicker', function(ev,picker) {
        $(this).val(picker.startDate.format('DD-MM-YYYY'));
        clickFilterButton();
    });
    $('input.datetimepicker').datetimepicker({
        format: 'DD-MM-YYYY',
        locale: $lang,
        showClose: true,
        widgetPositioning: {
            horizontal: 'left',
            vertical: 'auto'
        },
        toolbarPlacement: 'top',
        showClear: true
    });

 <div class="panel-body">
                        <table id="orderTable" class="table table-striped table-condensed table-hover">
                            <thead>
                            <tr class="filter">
                                <th><button type="submit" id="filterButton" class="btn btn-warning filterButton">
                                    <g:message code="general.filter.button" default="Filter"/>
                                </th>
                                <th><input class="form-control" size="10"
                                           placeholder="${message(code: 'order.filter.employeeid', default: 'Filter Employee')}"
                                           data-column-index="1"/>
                                </th>
                                <th> <input type="text" class="form-control" id="devicetimestamp" name="displaydate_filter" data-column-index="2"
                                            placeholder="${message(code: 'communication.filter.displayDate.placeholder', default: 'DD-MM-YYYY')}"
                                            title="${message(code: 'communication.filter.displaydate.info', default: 'Date after')}" maxlength="10" size="10"/>
                                </th>
                                <th><input class="form-control" size="10"
                                           placeholder="${message(code: 'order.filter.servertimestamp', default: 'Filter Servertimestamp')}"
                                           data-column-index="3"/>
                                </th>
                                <th><input class="form-control" size="10"
                                           placeholder="${message(code: 'order.filter.device', default: 'Filter Device')}"
                                           data-column-index="4"/>
                                </th>
                                <th><input class="form-control" size="10"
                                           placeholder="${message(code: 'order.filter.locationid', default: 'Filter Location')}"
                                           data-column-index="5"/>
                                </th>
                                <th><input class="form-control" size="10"
                                           placeholder="${message(code: 'order.filter.productid', default: 'Filter Product')}"
                                           data-column-index="6"/>
                                </th>
                                <th><input class="form-control" size="10"
                                           placeholder="${message(code: 'order.filter.quantity', default: 'Filter Quantity')}"
                                           data-column-index="7"/>
                                </th>
                            </tr>
                            <tr class="header">
                                <th><g:message code="order.employeeid.label" default="employee_id"/></th>
                                <th><g:message code="order.devicetimestamp.label" default="devicetimestamp"/></th>
                                <th><g:message code="order.servertimestamp.label" default="servertimestamp"/></th>
                                <th><g:message code="order.device.label" default="device"/></th>
                                <th><g:message code="order.locationid.label" default="location_id"/></th>
                                <th><g:message code="order.productid.label" default="product_id"/></th>
                                <th><g:message code="order.quantity.label" default="quantity"/></th>
                            </tr>
                            </thead>
                        </table>
                    </div>

编辑：

我尝试了更改，现在日历弹出，但月份显示为未定义。任何人都知道如何解决这个问题？

现在的样子

标签： javascriptjqueryhtml