jQuery UI " $("#datepicker").datepicker is not a function"

Question

When i use DatePicker, jQuery's UI plugin, in an existing .aspx page I get errors that:

$("#datepicker").datepicker is not a function

However, when I copy and paste the same code that creates and uses the datePicker to an HTML file that's also in the same directory as the aspx page, it works flawlessly. This leads me to assume that there are some JS files in the aspx page that's preventing the datePicker or maybe jQuery's UI JS files to load properly.

Can anyone confirm my beliefs or provide any tips on finding the culprit that's interfering with jQuery's UI plugins?

How are you including the datepicker plugin on the page - is it in a ScriptManagerProxy or are you writing it directly into the page? Are you sure that it is being loaded? If so, what other plugins are you including? Are you sure you've included ui.core.js? — James Kolpack
– James Kolpack, Commented Jul 31, 2009 at 14:07
I found the problem. I wish i have found this solution yesterday as oppose to an 1hr after posting this question. The JS code that I've written references jQuery and jQuery UI javascript file acted as a module. Its parent also references jQuery at the bottom of the body tag (so 2 references to jQuery). Since jQuery is reinitialized after jQuery UI, jQuery UI is wiped out as a plugin, hence why my code could not find the DatePicker plugin. — burnt1ce
– burnt1ce, Commented Jul 31, 2009 at 15:16
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

Eugene van der Merwe · Accepted Answer · 2010-11-30 11:15:23Z

234

I struggled with a similar problem for hours. It then turned out that jQuery was included twice, once by the program that I was adding a jQuery function to and once by our in-house debugger.

answered Nov 30, 2010 at 11:15

Eugene van der Merwe

4,6992 gold badges37 silver badges48 bronze badges

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

10 Comments

DavGarcia Over a year ago

This was my issue too. I had a reference to my own jQuery library along with jQuery Tools CDN which unknowingly included jQuery.

rrtx2000 Over a year ago

This was also my issue. I'm using superfish and it was also loading jquery. I didn't notice it until now.

Henrique Ordine Over a year ago

So what the solution?

Eugene van der Merwe Over a year ago

@HenriqueOrdine double check that jQuery is not included twice on the page.

Mario Over a year ago

This was also my problem. I was using common assets within the rails asset pipeline and was both declaring jquery in my top-level meta file (application.js) AND had a jquery min file in my JS folder. Double-declare. I just removed the jquery declaration.

|

MacAnthony · Accepted Answer · 2009-07-31 14:30:58Z

51

If there is another library that is using the $ variable, you can do this:

var $j = jQuery.noConflict();
$j("#datepicker").datepicker();

Also make sure your javascript includes are in the correct order so the jquery core library is defined before the jquery.ui. I've had that cause issues.

edited Jul 31, 2009 at 14:30

answered Jul 31, 2009 at 14:04

MacAnthony

4,5212 gold badges25 silver badges27 bronze badges

1 Comment

macaesar Over a year ago

Also make sure your javascript includes are in the correct order so the jquery core library is defined before the jquery.ui. I've had that cause issues << that is correct answer for me.

TylerH · Accepted Answer · 2025-03-19 22:07:15Z

32

I have fixed the issue by placing the below three files in the body section of the form at the end.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="Stylesheet" type="text/css" />

edited Mar 19 at 22:07

TylerH

21.3k84 gold badges84 silver badges121 bronze badges

answered Jan 3, 2017 at 1:36

Krishna

8,7643 gold badges30 silver badges29 bronze badges

1 Comment

NiceProgrammer Over a year ago

You could update your answer with newer version of jquery-ui: <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

random · Accepted Answer · 2009-07-31 14:47:36Z

28

This error usually appears when you're missing a file from the jQuery UI set.

Double-check that you have all the files, the jQuery UI files as well as the CSS and images, and that they're in the correctly linked file/directory location on your server.

answered Jul 31, 2009 at 14:47

random

9,97810 gold badges71 silver badges85 bronze badges

2 Comments

burnt1ce Over a year ago

This answer is closest to the solution that i've posted.

neminem Over a year ago

Note to self: make sure that in switching from local files to google's CDN files, that you actually have the right url. It's ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js, not ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery-ui.min.js, dang it.

AutomatedTester · Accepted Answer · 2009-07-31 14:04:36Z

If you think that there is a conflict you can use jQuery.noConflict() in your code. Details are in the docs.

REFERENCING MAGIC - SHORTCUTS FOR JQUERY

If you don't like typing the full "jQuery" all the time, there are some alternative shortcuts:

Reassign jQuery to another shortcut var $j = jQuery; (This might be the best approach if you wish to use different libraries) Use the following technique, which allows you to use $ inside of a block of code without permanently overwriting $:

(function($) { /* some code that uses $ */ })(jQuery)

Note: If you use this technique, you will not be able to use Prototype methods inside this capsuled function that expect $ to be Prototype's $, so you're making a choice to use only jQuery in that block. Use the argument to the DOM ready event:

jQuery(function($) { /*some code that uses $ */ });

Note: Again, inside that block you can't use Prototype methods

Thats from the end of the docs and might be useful to you

eKek0 · Accepted Answer · 2009-07-31 14:59:36Z

8

Go for the obvious first: Are you referencing well the jquery-ui.js file?

Try using the network tab of firebug to find if it is loaded, or the Information\View javascript code of the Web Developer Toolbar.

answered Jul 31, 2009 at 14:59

eKek0

23.4k26 gold badges94 silver badges121 bronze badges

Comments

Yannickv · Accepted Answer · 2016-09-20 09:44:57Z

4

I know that this post is quite old, but for reference I fixed this issue by updating the version of datepicker

It is worth trying that too to avoid hours of debugging.

https://cdnjs.com/libraries/bootstrap-datepicker

answered Sep 20, 2016 at 9:44

Yannickv

5824 silver badges14 bronze badges

1 Comment

RedSands Over a year ago

This is not applicable to Jquery UI datepicker. Bootstrap datepicker is a whole different animal.

Kevin Griffin · Accepted Answer · 2009-07-31 14:05:51Z

3

Have you tried using Firebug to 1) determine that there are no Javascript errors and 2) that the #datepicker element exists on the page?

Most likely there is an error prior to the datepicker call that is preventing the datepicker call from executing.

answered Jul 31, 2009 at 14:05

Kevin Griffin

2,2574 gold badges25 silver badges27 bronze badges

Comments

Banjer · Accepted Answer · 2010-04-23 01:33:55Z

2

I just had this issue, and moving the JS references and code towards the bottom of the page before the </body> tag fixed it for me.

answered Apr 23, 2010 at 1:33

Banjer

8,3406 gold badges51 silver badges68 bronze badges

Comments

Matthew Fries · Accepted Answer · 2010-09-07 04:26:40Z

1

Also check the permissions for the directory you download the files into. For some reason when I downloaded this, by default it was saved in a folder with no access allowed! It took forever to figure out that was the problem, but I just had to change the permission for the directory and it's contents - setting it so EVERYONE = READ ONLY. Works great now.

answered Sep 7, 2010 at 4:26

Matthew Fries

111 bronze badge

Comments

user15486 · Accepted Answer · 2011-05-11 16:06:17Z

1

I ran into this problem recently - the issue was that I had included the jQuery UI files in the head tag, but the Telerik library I was using included jQuery at the bottom of the body tag (thus apparently re-initializing jQuery and unloading the UI plugins previously loaded).

The solution was to find out where jQuery was actually being included, and including the jQuery UI scripts after that.

answered May 11, 2011 at 16:06

user15486

Comments

JOSE C S · Accepted Answer · 2021-04-03 05:35:04Z

1

(”#datepicker“).datepicker is not a function

I also ran into this problem a few days ago. It occurs probably because of having the jquery link more than once in the file. Try searching the whole file for that duplicate content.

It will look somewhat like this:

<script src="https://code.jquery.com/jquery-1.12.1.js"></script>

Keep one in the <head></head> tag and remove all the rest. This will fix the issue.

answered Apr 3, 2021 at 5:35

JOSE C S

419 bronze badges

Comments

user3799115 · Accepted Answer · 2021-09-06 02:32:09Z

1

For me it was just necessary to remove the "defer" property from the declaration of my script

answered Sep 6, 2021 at 2:32

user3799115

1311 silver badge9 bronze badges

Comments

Taylor Brown · Accepted Answer · 2025-03-20 23:59:05Z

Old question - newer version of .NET (4.5.6) - same issue - new answer

Using NuGet

Make sure you have the following installed via NuGet:

jQuery
AspNet.ScriptManager.jQuery
jQuery.UI.Combined
AspNet.ScriptManager.jQuery.UI.Combined

Install them from here [ Tools > NuGet Package Manager > Manage NuGet Packages for Solution ]

Then, jquery and jquery.ui.combined should be added to your ScriptManager in Site.Master. Will look something like this:

    <asp:ScriptManager runat="server">
        <Scripts>
            <%--To learn more about bundling scripts in ScriptManager see https://go.microsoft.com/fwlink/?LinkID=301884 --%>
            <%--Framework Scripts--%>
            <asp:ScriptReference Name="MsAjaxBundle" />
            <asp:ScriptReference Name="jquery" />
            <asp:ScriptReference Name="jquery.ui.combined" />
            <asp:ScriptReference Name="bootstrap" />
            <asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
            <asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />
            <asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
            <asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
            <asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
            <asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
            <asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
            <asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
            <asp:ScriptReference Name="WebFormsBundle" />
            <%--Site Scripts--%>
        </Scripts>
    </asp:ScriptManager>

This solved my same issue. Thank you.

Pang · Accepted Answer · 2012-12-13 01:52:27Z

0

I just ran into a similar issue. When I changed my script reference from self-closing tags (ie, <script src=".." />) to empty nodes (ie, <script src=".."></script>) my errors went away and I could suddenly reference the jQuery UI functions.

At the time, I didn't realize this was just a brain-fart of me not closing it properly to begin with. (I'm posting this simply on the chance that anyone else coming across the thread is having a similar issue.)

edited Dec 13, 2012 at 1:52

Pang

10.2k146 gold badges87 silver badges126 bronze badges

answered Jun 14, 2011 at 13:20

Peter Bernier

8,0806 gold badges41 silver badges53 bronze badges

Comments

jaimenino · Accepted Answer · 2017-10-03 01:52:05Z

0

I could fix this problem removing the jquery bundle on the _Layout.cshtml

Header

    <script src="~/Scripts/jquery-1.10.2.js"></script>
    <script src="~/Scripts/kendo/2015.2.902/kendo.all.min.js"></script>
    ...

Footer

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

Change footer to

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

answered Oct 3, 2017 at 1:52

jaimenino

643 bronze badges

Comments

Lefty · Accepted Answer · 2021-11-26 16:17:23Z

0

For those using Laravel, the default app.js has a defer in its declaration.
DELETE IT

answered Nov 26, 2021 at 16:17

Lefty

1,44015 silver badges20 bronze badges

1 Comment

TylerH Mar 20 at 19:25

This repeats the solution from user3799115 posted two months prior: stackoverflow.com/posts/69068579/timeline

user3790829 · Accepted Answer · 2022-08-25 09:39:13Z

0

For me the error was happening because of invalid date format:

Invalid code:

<script>
    $('#targetDate').datepicker({
        format : 'dd/MM/yyyy'
    });
</script>

Valid code:

<script>
    $('#targetDate').datepicker({
        format : 'dd/mm/yyyy'
    });
</script>

Notice the MM. Please see if the format of your date is correct. Hope it helps!

answered Aug 25, 2022 at 9:39

user3790829

513 bronze badges

Comments

TylerH · Accepted Answer · 2025-03-20 19:23:35Z

0

Have you tried using

$("#<%= txtDateElementId.ClientID %>").datepicker();

instead of

$("#txtDateElementId").datepicker();

when selecting an element by ID using jQuery.

edited Mar 20 at 19:23

TylerH

21.3k84 gold badges84 silver badges121 bronze badges

answered Aug 7, 2018 at 16:35

Emil Filip

2213 silver badges12 bronze badges

Comments

David tsang · Accepted Answer · 2015-05-28 06:50:20Z

-1

Some file no load before you call.

For example: Your code:

<%= javascript_include_tag "distpicker.min" %>
<%= javascript_include_tag "distpicker.data.min" %>

Change to this:

<%= javascript_include_tag "distpicker.data.min" %>
<%= javascript_include_tag "distpicker.min" %>

answered May 28, 2015 at 6:50

David tsang

232 bronze badges

1 Comment

tblev Over a year ago

This would be a specific ruby solution. Not necessarily conclusive to the original question.

user123456 · Accepted Answer · 2022-02-08 07:04:14Z

-1

referencing jQuery twice might cuase the issue.

answered Feb 8, 2022 at 7:04

user123456

2,6737 gold badges37 silver badges72 bronze badges

Comments

tpol · Accepted Answer · 2025-02-02 03:42:50Z

-1

In my case, it was solved by changing the import order of the following scripts: Before (Not work):

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"> 
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>

After (Working):

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script> 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js">
</script>

edited Feb 2 at 3:42

tpol

1951 silver badge10 bronze badges

answered Sep 12, 2019 at 17:03

Matías W.

3603 silver badges17 bronze badges

Comments

TylerH · Accepted Answer · 2025-03-20 19:23:44Z

-1

Your code needs to include JQuery UI, paste this after your jQuery script:

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

If you want higher security then you can download version 1.13 on your PC, as 1.12 has some vulnerabities and Google doesn't host the newest version yet.

edited Mar 20 at 19:23

TylerH

21.3k84 gold badges84 silver badges121 bronze badges

answered May 22, 2022 at 6:54

NiceProgrammer

3103 silver badges12 bronze badges

Collectives™ on Stack Overflow

jQuery UI " $("#datepicker").datepicker is not a function"

23 Answers 23

10 Comments

1 Comment

1 Comment

2 Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

1 Comment

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

23 Answers 23

10 Comments

1 Comment

1 Comment

2 Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

1 Comment

Comments

Comments

Comments

Linked

Related