我正在使用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>
编辑:
我尝试进行更改,现在弹出了日历,但是月份显示为未定义。任何人都知道如何解决此问题?