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

Well, since you've got the proper jquery-ui.js included and it is still saying that datepicker() is not a function, is it possible that your selector is incorrect? Does $('.dateinput') exist after page load or is it being added dynamically and double check that it's a classname and not it's id (( $('#dateinput') )) — Kyle
– Kyle, Commented Mar 24, 2016 at 18:42
Actually when I removed the includes of jquery <script src="ajax.googleapis.com/ajax/libs/jquery/2.1.4/…> <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script> I am not getting this error any more , thanks Andy — Ilya Bibik
– Ilya Bibik, Commented Mar 24, 2016 at 19:00
whats your html looks like ? do you have "dateinput" class assigned to the input field ? — koolhuman
– koolhuman, Commented Mar 24, 2016 at 19:18
Since I'm using Webpack, I needed to use jquery-ui-bundle instead. stackoverflow.com/a/39230057/470749 — Ryan
– Ryan, Commented Nov 16, 2018 at 19:49

szym · Accepted Answer · 2016-03-24 20:11:40Z

94

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.

edited Mar 24, 2016 at 20:11

answered Mar 24, 2016 at 19:17

szym

5,90630 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

itsols Over a year ago

This was a great reminder. In my case I had already called jquery-ui from another php include file. So it's the same effect as you've correctly stated. Thanks!

Anburaj_N Over a year ago

i have the same error i have bootstrap.min.css,jquery-1.9.1.js,jquery-ui.js,jquery.min.js what order do i have to give

anvesh · Accepted Answer · 2017-12-14 18:20:20Z

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

Mauro Candido · Accepted Answer · 2019-06-23 18:36:09Z

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.

answered Jun 23, 2019 at 18:36

Mauro Candido

1614 silver badges12 bronze badges

Comments

Marcus Lind · Accepted Answer · 2017-11-23 04:11:41Z

1

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

jQuery.dataTables.min.js
dataTables.bootstrap.min.js
dataTables.bootstrap.min.css
bootstrap-datepicker.css
bootstrap-datepicker.js

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

I hope this will help you. Regards, Vivek Singla

edited Nov 23, 2017 at 4:11

Marcus Lind

11.6k9 gold badges66 silver badges117 bronze badges

answered Nov 23, 2017 at 3:44

user8994237

111 bronze badge

Comments

Joktan Okpanachi · Accepted Answer · 2018-11-09 07:09:12Z

0

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

answered Nov 9, 2018 at 7:09

Joktan Okpanachi

1

Comments

Jamal Ashraf · Accepted Answer · 2022-02-27 12:05:06Z

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

Open nodemodules and go into types folder.
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!

vaishali · Accepted Answer · 2017-06-08 10:54:59Z

-2

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.

answered Jun 8, 2017 at 10:54

vaishali

3252 silver badges11 bronze badges

Collectives™ on Stack Overflow

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

7 Answers 7

What went wrong?

Solution

2 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

What went wrong?

Solution

2 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related