datepicker-bs4

date picker for Bootstrap 4

Installation

Dependencies

• jQuery
• Bootstrap v4
• Day.js
• Font Awesome v5

Manual

<link href="/path/to/bootstrap.css" rel="stylesheet" />
<script src="/path/to/jquery.js"></script>
<script src="/path/to/bootstrap.js"></script>
<script src="/path/to/dayjs.js"></script>
<script src="/path/to/fontawesome.js"></script>
<script src="/path/to/datepicker-bs4.js"></script>

Usage

<div class="row justify-content-center">
<div class="form-group col-6">
<label for="birth_date">Birth Date:</label>
<div class="input-group">
<input type="text" id="birth_date" class="form-control" name="birth_date" />
<div class="input-group-append"><button type="button" class="btn btn-outline-secondary" data-toggle="datepicker"><i class="far fa-calendar-alt"></i></button></div>
</div>
</div><!-- /.form-group -->
</div>

jQuery('#birth_date').datepicker();

Options

Option	Default	Description
format	MM/DD/YYYY	Date format using Day.js format tokens. For custom formats, additional Day.js plugins may need to be installed.
maxDate	null	The maximum allowed date in YYYY-MM-DD format. This can also be specified using a "max" attribute on the input tag.
minDate	1900-01-01	The minimum allowed date in YYYY-MM-DD format. This can also be specified using a "min" attribute on the input tag.
popoverWidth	19rem	Width of the Bootstrap popover.
startView	day	The view the picker should show when opened. Valid values include "year", "month", or "day". Useful for date-of-birth pickers.
scheme	light	The visual scheme to apply to the picker. Valid values include "light", "dark", or "auto". When "auto", the scheme is dependent on the browser's configured mode/scheme.

Defaults

The default plugin options can be overridden so that they're applied to all pickers.

jQuery.fn.datepicker.scheme = 'auto';

Demo

Online Demo