javascript - setdate - jquery deferred exception is not a function




Uncaught TypeError: $(…).datepicker is not a function(anonymous function) (4)

What went wrong?

When you include jQuery the first time:

<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 plugs itself into jQuery, and "adds" $(...).datepicker.

But then you are including jQuery once again:

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

It undoes the plugging in and therefore $(...).datepicker becomes undefined.

Although the first $(document).ready block appears before that, the anonymous callback function body is not executed until all scripts are loaded, and by then $(...) (window.$ to be precise) is referring to the most recently loaded jQuery.

You would not run into this if you called $('.dateinput').datepicker immediately rather than in $(document).ready callback, but then you'd need to make sure that the target element (with class dateinput) is already in the document before the script, and it's generally advised to use the ready callback.

Solution

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

Alternatively (in particular if you are not using jquery-ui for anything else), you could try bootstrap-datepicker.

I found few answers on stack overflow but still cant resolve my problem. I am running on Django but I dont think it is relevant for this error.

I try to make work my date picker java script but I am getting the 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 XHR finished loading: POST "https://localhost:26143/skypectoc/v1/pnr/parse".l.cors.a.crossDomain.send @ jquery-2.1.0.min.js:4o.extend.ajax @ jquery-2.1.0.min.js:4PNR.findNumbers @ pnr.js:43parseContent @ contentscript.js:385processMutatedElements @ contentscript.js:322

This is 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>            

any feedback will be very appreciated


Including more than one reference to Jquery library is the reason for the error Only Include one reference to the Jquery library and that will resolve the issue


This error is occur,because the function is not defined. In my case i have called the datepicker function without including the datepicker js file that time I got this error.


You just need to add three file and two css links. You can either cdn's as well. Links for the js files and css files are as such :-

  1. jQuery.dataTables.min.js
  2. dataTables.bootstrap.min.js
  3. dataTables.bootstrap.min.css
  4. bootstrap-datepicker.css
  5. bootstrap-datepicker.js

They are valid if you are using bootstrap in your project.

I hope this will help you. Regards, Vivek Singla







datepicker