Error Uncaught TypeError: $(…).datepicker (EUTD)

I found some answers on stack overflow but still can't solve my problem. I am running Django but I don't think this is relevant for this error.

I am trying to make my date picker java script work but I am getting an error

1:27 Uncaught TypeError: $(...). Datepicker is not a function (anonymous function) @ 1: 27fire @ jquery-1.9.1.js: 1037self.fireWith @ jquery-1.9.1.js: 1148jQuery.extend .ready @ jquery-1.9.1.js: 433completed @ jquery-1.9.1.js: 103 jquery-2.1.0.min.js: 4 4PNR.findNumbers@pnr.js: 43parseContent @ contentcript.js: 385processMutatedElements @ contentcript.js: 322

Here are all my scripts:

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>

<script type="text/javascript">
$(document).ready(function() {
    $('.dateinput').datepicker({ format: "yyyy/mm/dd" });
});
</script>

      <!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<!-- Just to make our placeholder images work. Don't actually copy the next line! -->
<script src="http://getbootstrap.com/assets/js/vendor/holder.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="http://getbootstrap.com/assets/js/ie10-viewport-bug-workaround.js"></script>
 <script type="text/javascript">
              $(document).ready(function() {
                  $("#extra-content").hide();
                  $("#toggle-content").click(function(){
                      $("#extra-content").toggle();
                  });
              });
 </script>

Feedback would be greatly appreciated.

What is wrong?

When you first include jQuery:

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>

The second script hooks itself into jQuery, and "adds" $(...).datepicker.

But then you include jQuery once again:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

This cancels the plugging in and therefore $(...).datepicker becomes undefined.

Even though the first $(document).ready block appears before that, the body of the anonymous call function is not executed until all the scripts are loaded, and at that point $(...)( window.$ to be precise) refers to the newly loaded jQuery.

You won't experience this if you call $('.dateinput').datepicker directly rather than in the $(document).readycallback, but then you have to make sure that the target element (with the dateinput class) already exists in the document before the script, and it's generally recommended to use the readycallback.

Solution

If you want to use the datepicker from jquery-ui, it might make more sense to include the jquery-ui script after bootstrap. jquery-ui 1.11.4 is compatible with jquery 1.6+ so it should work fine.

Or (especially if you're not using jquery-ui for anything else), you could try  bootstrap-datepicker .