Bootstrap Datepicker doesn’t work?

Asked

Viewed 1,356 times

2

HTML 

<input type="text" id="datepicker" class="form-control">

THE SCRIPT IS LOADING NORMALLY

<script src="{{ asset('js/bootstrap-datepicker.min.js')}}"></script>

JAVASCRIPT

    <script type="text/javascript">
        $(function(){

            $('#datepicker input').datepicker({
    format: "dd/mm/yyyy",
    language: "pt-BR"
});
});
    </script>
javascript jquery bootstrap-3

  • this question is very vague, and that this code does not show much. see the console window to see if it returns any error

  • Hello friend. Please put an example code on https://jsfiddle.net/. It’s easier for us to help.

2 answers

3


Possible problems: forgot to put jquery, put jquery in wrong order, missing css reference.

Functional example:

$( "#datepicker" ).datepicker({
    format: "dd/mm/yyyy",
    language: "pt-BR"
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.css" rel="stylesheet"/>

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

<p>Date: <input type="text" id="datepicker"></p>

I saw that you need the version en then you need an extra link:

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

    I was writing this when you posted.

2

Your selector is incorrect. When you use the selector $('#datepicker input') means you are looking for an element in the DOM input who is the son of some element with the id="datepicker".

To work this selector your HTML must be as follows:

<div id="datepicker">
    <input type="text" class="form-control">
</div>

Or just change your selector to:

$('#datepicker').datepicker(...);

In this article from Medium, talks about CSS preceedences... It’s very interesting and will help you in learning.

Browser other questions tagged javascript jquery bootstrap-3

You are not signed in. Login or sign up in order to post.