Bootstrap Datepicker
Use Bootstrap Datepicker to enable input for picking dates, date ranges
Getting started
You need to include the following two javascript files before the end of the body tag:
<script src="@@path/vendor/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>Datepicker
Use the following markup to create a single datepicker:
Date of birth
<small class="d-block font-weight-normal mb-3">Date of birth</small>
<div class="form-group">
<div class="input-group input-group-border">
<div class="input-group-prepend">
<span class="input-group-text"><i class="far fa-calendar-alt"></i></span>
</div>
<input class="form-control datepicker" placeholder="Select date" type="text" value="06/20/2018">
</div>
</div>Datepicker range
Use the following example to enable a range picker:
<div class="input-daterange datepicker row align-items-center">
<div class="col">
<div class="form-group">
<div class="input-group input-group-border">
<div class="input-group-prepend">
<span class="input-group-text"><i class="far fa-calendar-alt"></i></span>
</div>
<input class="form-control" placeholder="Start date" type="text" value="06/18/2018">
</div>
</div>
</div>
<div class="col">
<div class="form-group">
<div class="input-group input-group-border">
<div class="input-group-prepend">
<span class="input-group-text"><i class="far fa-calendar-alt"></i></span>
</div>
<input class="form-control" placeholder="End date" type="text" value="06/22/2018">
</div>
</div>
</div>
</div>Javascript
Initializing the datepicker is fairly straightforward. Here’s how we use it in pixel.js:
$('.datepicker')[0] && $('.datepicker').each(function () {
$('.datepicker').datepicker({
disableTouchKeyboard: true,
autoclose: false
});
});
Read more about Bootstrap Datepicker from the official plugin website.