1.0.3
https://github.com/mymth/vanillajs-datepicker
A vanilla JavaScript remake of bootstrap-datepicker for Bulma and other CSS frameworks
Vanilla JS Datepicker is included in Hitman vendor bundle.
<script src="1.2.2/vendor/datepicker.min.js"></script>
Please note that CSS is included in the vendor bundle, JS is served as separate file.
| INVOICE NUMBER | CUSTOMER | OUTSTANDING (EUR) | PAID (EUR) | CREDITED (EUR) | INSTALLMENTS PAID | DAYS OLD | NEXT MESSAGE | |||
|---|---|---|---|---|---|---|---|---|---|---|
| 123456 | Mr Bean | 115,00 | 0,00 | 0,00 | 0 from 1 | 19 | Notification about late installment payment |
<div class="row">
<div class="col-lg-12">
<div class="toolbar px-2" role="toolbar">
<div class="toolbar-group d-flex toolbar-group-left my-2">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">
<i class="fas fa-calendar-alt"></i>
</span>
</div>
<input type="text" class="form-control datepicker-input">
</div>
</div>
</div>
<table class="table">
<thead>
<tr>
<th style="width:2%">
<a class="toggle" data-state="false" href="#">
<i class="fas fa-check-square"></i>
</a>
</th>
<th class="column-sortable text-right" data-sort="des">
INVOICE NUMBER
</th>
<th>CUSTOMER</th>
<th class="text-right">OUTSTANDING (EUR)</th>
<th class="text-right">PAID (EUR)</th>
<th class="text-right">CREDITED (EUR)</th>
<th>INSTALLMENTS PAID</th>
<th class="text-right">DAYS OLD</th>
<th>NEXT MESSAGE</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" value="true" class="invoices"></td>
<td class="text-right">
<a target="_blank" href="#">123456</a>
</td>
<td>Mr Bean</td>
<td class="text-right"><span class="badge badge-danger">115,00</span></td>
<td class="text-right">0,00</td>
<td class="text-right">0,00</td>
<td><b>0</b> from 1</td>
<td class="text-right">19</td>
<td>Notification about late installment payment</td>
<td></td>
<td class="text-right"></td>
</tr>
</tbody>
</table>
</div>
</div>
<script>
const elem = document.querySelector('.datepicker-input');
const datepicker = new Datepicker(elem, {
buttonClass: 'btn',
todayHighlight: true
});
</script>