Bootstrap Datepicker

Use Bootstrap Datepicker to enable input for picking dates, date ranges

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.