CODEWITHSUNDEEP
javascriptjquerybootstrap-4bootstrap-table
Kenzo_Gilead
Kenzo_Gilead

Reputation: 2439

When entering date in bootstrap-table datepicker it is immediately deleted

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/[email protected]/dist/extensions/filter-control/bootstrap-table-filter-control.css">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/bootstrap-table.min.css">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/tableExport.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/libs/jsPDF/jspdf.umd.min.js"></script>


<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/bootstrap-table.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/extensions/export/bootstrap-table-export.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

Upvotes: -1

Views: 171

Answers (1)

Kenzo_Gilead
Kenzo_Gilead

Reputation: 2439

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

Upvotes: 1

Related Questions