Geek Answers Handbook

Bootstrap Datepicker does not work.

Fiddle ex: http://jsfiddle.net/EmwFE/

So, I'm trying to get a datepicker , and I think I'm following the directions, but I can’t get the calendar popup.

TIA

Example script above code below.

<label class="control-label" for="input08"> My Start Date </label> <div class="controls"> <script type="text/javascript"> $(document).ready(function() { $('.datepicker').datepicker(); </script> <div class="input-append date" id="dp3" data-date="12-02-2012" data-date-format="dd-mm-yyyy"> <input class="span2" size="16" type="text" value="12-02-2012" class="datepicker"> <span class="add-on"><i class="icon-th"></i></span> </div> </div>
+6
source share
5 answers

Take a look: jsfiddle

You are betting on initializing the div identifier that contains everything. you didn’t want anything!

 $('#dp3').datepicker();
+8
source

There were several problems in your code.

  • Missing brackets after your ready () call
  • Using id selector instead of class selector ( #datepicker refers to id="datepicker" , .datepicker - class="datepicker" )

Working example

+5
source

You did not have an identifier. And something else that might cause problems later is the input that has the class attribute defined by TWICE, instead list each class in the same attribute, separated by a space:

 <input id="datepicker" class="span2 datepicker" size="16" type="text" value="12-02-2012">

http://jsfiddle.net/EmwFE/2/

I noticed that you had built-in javascript trying to refer to it by the class $('.datepicker') , which did not work because you had a class attribute defined twice, and the second definition is ignored. The javascript panel used $('#datepicker') , which did not work because you did not have an identifier set on the input. That way any jquery selection method would work, you just had to fix the problems with the element.

+3
source

Lughino's decision led to some weird behavior for me. I think you should delete

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

and

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

And write this code in the javascript field:

 $(document).ready(function () { $('#dp3').datepicker(); });

See jsfiddle .

0
source

The given code example contains 2 errors :

1) The ready () function is not closed:

 $(document).ready(function() { $('.datepicker').datepicker(); });

2) The input element has the attribute "class" defined 2 times:
(using the class attribute in jQuery selector is ideal for finding element (s), no need to use identifier)

 <input class="span2" size="16" type="text" value="12-02-2012" class="datepicker">

it should be

 <input class="span2 datepicker" size="16" type="text" value="12-02-2012">

jsfiddle with fix

0
source

More articles:


All Articles