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

Question

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

Answer 1

The error is because you are including the script links at two places which will do the override and re-initialization of date-picker

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

So exclude either src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"

or src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"

It will work..

Answer 2

if you are using ASP.NET MVC

Open the layout file "_Layout.cshtml" or your custom one

At the part of the code you see, as below:

@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
@Scripts.Render("~/bundles/jquery")

Remove the line "@Scripts.Render("~/bundles/jquery")"

(at the part of the code you see) past as the latest line, as below:

@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/jquery")

This help me and hope helps you as well.

Answer 3

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

Answer 4

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

Answer 5

We need to add the declaration of our jQuery plugin under interface with the same name. We don’t want to mess with the jQuery source code, so we need to create our own type definition file. I’m using React/typescript so just follow these steps

1. Open nodemodules and go into types folder.
2. Go into jQuery and open jQuery.d.ts fileand add the below code into interface JQuery<TElement = HTMLElement> extends Iterable {

daterangepicker(options?: any, callback?: Function) : any;

I’m declaring the daterangepicker function (this is the actual function that the API expose) and setting all its arguments as any ( You can go further and use specific types, but in this case, I will keep it simple ). Now when the typescript compiler sees our interface, it will merge it with the jQuery interface and the error is gone. That’s all!

Answer 6

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.