Question

我在表格中使用了WebAPI（JSON），我需要过滤＆＃34;日期＆＃34;在bootstrap-table中使用datetimepicker。 PLS。有人帮助我。

注意：时间戳是需要过滤的日期

表 - 这是在我的表中调用WebApi

var WebApi = "http://track.asiacom.co.th/fmswebapi/api/posinfo";
$(document).ready(function () {
    $('#report').bootstrapTable({
        idField: 'PosID',
        url: WebApi,
        columns: [{
            field: 'PosID',
            title: 'id',
            class: 'hidden-xs hidden-sm hidden-md hidden-lg hidden-desktop'
        }, {
            field: 'Asset',
            title: 'Vehicle'
        }, {
            field: 'Tag',
            title: 'Device'
        }, {
            field: 'Location',
            title: 'Location'
        }, {
            field: 'Timestamp',
            title: 'Timestamp',
            formatter: timestampFormatter
        }, {
            field: 'Battery',
            title: 'Battery'
        }, {
            field: 'Engine',
            title: 'Engine',
            formatter: engineFormatter
        }, {
            field: 'Ignition',
            title: 'Ignition',
            formatter: ignitionFormatter
        }]
    });
});

HTML - 这是datetimepicker表单

<input id="dateFrom" type="text" class="form-control" placeholder="DD-MMM-YYYY HH:MM">
<input id="dateFrom" type="text" class="form-control" placeholder="DD-MMM-YYYY HH:MM"><br/>
<input id="dateTo" type="text" class="form-control" placeholder="DD-MMM-YYYY HH:MM">
<small class="text-muted pull-left">To</small>

的Javascript

$('#dateFrom').datetimepicker({
    format: 'dd-M-yyyy hh:ii:ss P',
    autoclose: 'true',
    todayBtn: 'true',
    todayHighlight: 'true',
    keyboardNavigation: 'true'
});

$('#dateTo').datetimepicker({
    format: 'dd-M-yyyy hh:ii:ss P',
    autoclose: 'true',
    todayBtn: 'true',
    todayHighlight: 'true',
    keyboardNavigation: 'true'
});

转换日期

function timestampFormatter(value, row) {
    var t = value;

    function convertUTCDateToLocalDate(date) {
        var newDate = new Date(date.getTime() + date.getTimezoneOffset() * 60 * 1000);
        var offset = date.getTimezoneOffset() / 60;
        var hours = date.getHours();
        newDate.setHours(hours - offset);
        return newDate;
    }

    var date = convertUTCDateToLocalDate(new Date(t));
    var timestamp = moment(date.toLocaleString()).format("D-MMM-YYYY, hh:mm:ss A");
    return '<div>' + '<span><i class="fa fa-clock-o hidden-xs hidden-md"></i>&nbsp;' + timestamp + '</span>' + '</div>';
}

Answer 1

format: 'dd-M-yyyy hh:ii:ss P',

检查格式为dd-M-YYYY

Answer 2

您可以尝试使用Filter Control扩展，这是一个示例： jsfiddle.net/djhvscf/e3nk137y/1982 /

如何使用bootstrap datetimepicker来过滤引导表中的日期？

2 个答案: