CODEWITHSUNDEEP
javascripthtmltwitter-bootstrapbootstrap-5
Cheknov
Cheknov

Reputation: 2082

Datepicker not working / showing - Bootstrap 5

I am trying to add a timepicker to my page using bootstrap 5, for some reason the calendar is not loading so I can not pick any date. I do not know if I have done something wrong or the plugin is not compatible with the latest version of bootstrap.

If you click 'launch demo modal' you will see the date input field and datepicker is not working there.

enter image description here

This is the code for the input date field:

<div class="col-12">
    <label for="date" class="col-sm-1 col-form-label">Date</label>
    <div class="input-group date" id="datepicker">
        <input type="text" class="form-control">
        <span class="input-group-append">
        <span class="input-group-text bg-white d-block">
        <i class="fa fa-calendar"></i>
        </span>
        </span>
    </div>
</div>

JS (truncated):

<script type="text/javascript">
    $(document).ready(function () {
        $('#datepicker').datepicker();
        ...
    });
</script>

I also tried using $('.datepicker').datepicker(); according to the bootstrap-datepicker docs but nothing changed.

Upvotes: 6

Views: 33053

Answers (3)

Dario Zadro
Dario Zadro

Reputation: 1284

Why add additional JS for datepicker fields?

You can simply make the input field of type date to get a native browser date selector.

Example:

<input type="date" class="form-control" name="date-field" />

Support for date (along with time) fields can be found on Can I Use.

Upvotes: 9

Soubhagya Kumar Barik
Soubhagya Kumar Barik

Reputation: 2595

Include below CSS and js in your file

Reference: https://cdnjs.com/libraries/bootstrap-datepicker

<!-- Bootstrap datepicker CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css"/>

<!-- Bootstrap datepicker JS-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>

For custom styling please have a look at the below link

Bootstrap Datepicker - Custom Styles

Upvotes: 2

Alan Yu
Alan Yu

Reputation: 1542

Demo page

Stackoverflow source

You should put bootstrap-datepicker.min.js after jquery.js. It somehow make errors because of that.

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>

Upvotes: 8

Related Questions