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.