Django Datepicker

The Django datepicker is tied to a standard form input field. In order the Django datepicker to work, focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay. Choose a date, click elsewhere on the page (blur the input), or hit the Esc key to close. If a date is chosen, feedback is shown as the input’s value.
Keep reading our Django Datepicker examples and learn how to use this plugin.

Usage

In order to use this plugin on your page you will need to include the following script in the “Optional JS” area from the page’s footer:

<script src="/assets/vendor/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>

Initialization

Add the .datepicker class on the text input that you want to become a datepicker.

Single datepicker

<div class="form-group">
    <div class="input-group">
        <div class="input-group-prepend">
            <span class="input-group-text"><i class="ni ni-calendar-grid-58"></i></span>
        </div>
        <input class="form-control datepicker" placeholder="Select date" type="text" value="06/20/2022">
    </div>
</div>

Range datepicker

<div class="input-daterange datepicker row align-items-center">
    <div class="col">
        <div class="form-group">
            <div class="input-group">
                <div class="input-group-prepend">
                    <span class="input-group-text"><i class="ni ni-calendar-grid-58"></i></span>
                </div>
                <input class="form-control" placeholder="Start date" type="text" value="06/18/2022">
            </div>
        </div>
    </div>
    <div class="col">
        <div class="form-group">
            <div class="input-group">
                <div class="input-group-prepend">
                    <span class="input-group-text"><i class="ni ni-calendar-grid-58"></i></span>
                </div>
                <input class="form-control" placeholder="End date" type="text" value="06/22/2022">
            </div>
        </div>
    </div>
</div>