I have a column in a bootstrap-table that is a date. And I use a filter on that column.
I have 2 ways to select the date. Clicking on the calendar and selecting the date visually. Or by entering it in a string format. If I select it through the calendar, everything is correct. But if I enter it manually, once the days have been entered, I go on to enter the months, and the days are deleted... This is what happens with months and years too.
Do you have any idea what is happening? For me everything seems correct, could there be some conflict in the CSS and/or JS that I am loading? I'm also putting it in case it helps you in any way. Don't hesitate to ask me for anything you need.
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-table@1.22.5/dist/extensions/filter-control/bootstrap-table-filter-control.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-table@1.22.5/dist/bootstrap-table.min.css">
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/tableexport.jquery.plugin@1.29.0/tableExport.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/tableexport.jquery.plugin@1.29.0/libs/jsPDF/jspdf.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-table@1.22.5/dist/bootstrap-table.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-table@1.22.5/dist/extensions/export/bootstrap-table-export.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-table@1.22.5/dist/extensions/filter-control/bootstrap-table-filter-control.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.3/xlsx.full.min.js"></script>
<table id="tblDates" class="table table-bordered table-striped table-hover"
data-locale="es-ES"
data-toolbar="#toolbar"
data-toggle="table"
data-search="false"
data-show-refresh="true"
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-show-search-clear-button="true"
data-url="/Home/Refresh">
<thead style="background-color: rgba(200, 200, 200, 0.8);">
<tr>
<th data-field="dateAdded" data-sortable="true" data-switchable="true" data-filter-control="datepicker">Date</th>
</tr>
</thead>
</table>Well, I finally managed to find the problem. Everything a little crazy. This particular version of the bootstrap-table I'm using, 1.22.5 (last one), has problems entering to select the date introducing it manually. I changed the version, particularly to 1.20.2 and this problem stopped occurring.
Check here for more information about this version: Bootstrap Table 1.20.2