CODEWITHSUNDEEP
javascriptsortingdatetimebootstrap-4bootstrap-table
Kenzo_Gilead
Kenzo_Gilead

Reputation: 2439

Cannot sort or filter a date in bootstrap-table

I need your help again. Let me tell you.

I have created a bootstrap-table where one of its columns is a datetime that options filter and sort the data in that same column. But when I filter by a date, either by entering the value by hand or using the datepicker, it doesn't filter anything. On the other hand, if I sort the column, it doesn't work correctly either, it seems that it is actually sorted as if it were a string or something similar.

This is my code.

<table id="tbl" class="table table-bordered table-striped table-hover"
       data-toolbar="#toolbar"
       data-toggle="table"
       data-show-toggle="true"
       data-show-fullscreen="true"
       data-show-columns="true"
       data-show-columns-toggle-all="true"
       data-detail-view="false"
       data-show-export="true"
       data-export-types="['json', 'xml', 'csv' , 'txt' , 'sql', 'xlsx' , 'pdf' ]"
       data-export-data-type="all"
       data-click-to-select="false"
       data-minimum-count-columns="2"
       data-show-pagination-switch="false"
       data-pagination="true"
       data-side-pagination="client"
       data-page-list="[10, 25, 50, 100, all]"
       data-show-footer="true"
       data-filter-control="true"
       data-cache="false"
       data-show-search-clear-button="true">

<th data-field="fechaIncorporacion" data-sortable="true" data-filter-control="datepicker">Fecha Incorporacion</th>

I have tried to add this attribute to the column with the date that I found in a forum, in case the problem was related to the date format, but nothing

data-date-format="YYYY-MM-DD"

I have tried to define a custom search, but this does not work correctly either. From what I have been able to see, when doing new Date(dateA) of some dates that come from the controller, we get NaN

<th data-field="myDate" data-sortable="true" data-filter-control="datepicker" data-sorter="myDateSorter">My Date</th>

window.myDateSorter= function myDateSorter(a, b) {
    var a = new Date(a).getTime() - new Date(b).getTime();
    return a;
}

There is no attribute for the column (both sort and search) to work correctly. My slight suspicion is that perhaps the date format does not correspond to what the bootstrap-table can handle. Is there a way to configure the bootstrap-table to handle these types of "dd-mm-yyyy" dates?

Upvotes: 0

Views: 30

Answers (0)

Related Questions