JS/jQuery TypeError: jQuery(...).datepicker is not a function

Question

I've been scratching my head on this for 2 days, pretty sure I'm just missing something simple but I can't for the life of me figure out why it's not working.

I'm trying to use the script below on my WordPress site to disable specific dates within a datepicker field in a ContactForm7 form.

I can load the script in jsfiddle with a simple input field using the same id and it works perfectly...but when I add it to my site the dates aren't disabled, and there's an error in the JS error console that says "jQuery(...).datepicker is not a function"

I've added it in my header.php file, just below the wp_head() call and just above the </head> tag. I've assigned my datepicker field with the id of dpick like the script uses.

I read that this error is commonly caused when using the $ symbol because it can conflict with other jQuery scripts within WordPress...so they suggested replacing $ with jQuery instead (which I've done in the script below)...but I'm still getting the error

var unavailableDates = ["1-9-2013", "2-9-2013", "3-9-2013", "4-9-2013", "5-9-2013"];

    function unavailable(date) {
            dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
            if (jQuery.inArray(dmy, unavailableDates) == -1) {
                return [true, ""];
            } else {
                return [false, "", "Unavailable"];
        }
    }

        jQuery(function() {
            jQuery( '#dpick' ).datepicker({
                dateFormat: 'dd MM yy',
                beforeShowDay: unavailable
        });

    });

Can't thank you enough for any help you can offer...this seems like such a simple thing but I just can't seem to wrap my head around it!

@maverickosama92 yes, I believe that's part of the wp_head() call...when I view the source of my page, I can see that it's calling the core jquery ui as well as a bunch of specific jquery ui modules — Iconoclast
– Iconoclast, Commented Aug 22, 2013 at 14:17
It looks like everything but the jQuery UI datepicker is included on your site. Might want to take a look at that. Core doesn't include datepicker automatically i.imgur.com/Hd9FdsL.png — vernak2539
– vernak2539, Commented Aug 22, 2013 at 14:19
@vernak2539 So it's a problem with the datepicker itself, not a problem with the script? The datepicker was included with the ContactForm7 plugin that I'm using...and it seems to be working okay for selecting dates (within the browsers that support it...I can't get the datepicker to work in Firefox/IE/Safari but it works fine in Chrome/Opera) but I just can't seem to get this date disabling script to work with it — Iconoclast
– Iconoclast, Commented Aug 22, 2013 at 14:22
@Iconoclast The issue is that the datepicker file is not being included and jquery doesn't have that function available to it. Hence the TypeError. The reason it works in chrome/opera is because the input type is "date" which they supports at the moment, but FF/IE/Safari don't, so that's why you're seeing that. — vernak2539
– vernak2539, Commented Aug 22, 2013 at 14:28

napoleonss · Accepted Answer · 2014-03-11 11:09:54Z

21

The are several reasons for this error:

The jquery.ui is used before jquery.
The $ is used by another library.
The jquery lib that is referenced locally(wordpress) has different version from that using jquery.ui.
When the right library and version is referenced the browser cache must be cleared.

edited Mar 11, 2014 at 11:09

answered Aug 22, 2013 at 15:06

napoleonss

1,14914 silver badges19 bronze badges

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

5 Comments

Iconoclast Over a year ago

It looks like jQuery is loaded before jQueryUI, so that should be okay. I'm not using $ in the script, so that should be okay. According to my WP dashboard everything is up to date so I don't think it's because of different jQuery versions...

Rolwin Crasta Over a year ago

The jquery.ui is used before jquery. This is the most common reason

Vaibhav Jain Over a year ago

I am getting the same error but due to "The $ is used by another library" ho do i resolve this???

napoleonss Over a year ago

You may use the immediate function pattern to encapsulate '$'. (function($){...})(your-jQuery-version-here); Search for widget example.

Aneeq Azam Khan Over a year ago

for me second point was creating issue just resolved by changing that to some other variable

Leniel Maccaferri · Accepted Answer · 2013-11-13 23:34:34Z

6

I was having the same problem. In my case I had two jQuery script references on my main page (_Layout.cshtml in ASP.NET MVC). I added 1 reference to jQuery at the top but there was 1 at the bottom of the page that I didn't notice... In Firebug this is what I saw:

enter image description here

So as you can see, jQuery UI was sitting in the middle of the conflict! :D This took me some time to figure out.

answered Nov 13, 2013 at 23:34

Leniel Maccaferri

103k48 gold badges381 silver badges495 bronze badges

1 Comment

Kenneth mwangi Over a year ago

help me alot...so you remove the one after jquery-ui-1.10.3.js

Pratswinz · Accepted Answer · 2015-06-02 06:20:15Z

3

check if all files are loaded.Should have 200 ok status.

answered Jun 2, 2015 at 6:20

Pratswinz

1,47613 silver badges25 bronze badges

1 Comment

Click Ok Over a year ago

Ok, I'm hours looking for this error, and then ONE css file was not loaded... Your answer did me look Fidller, and now is everything working fine...

cookiesncream · Accepted Answer · 2016-08-18 07:19:17Z

3

This worked for me, for conflicting jquery codes -

  <script>  
  $.noConflict();  //Not to conflict with other scripts
jQuery(document).ready(function($) {
$( "#datepicker" ).datepicker({
  dateFormat:"yyyy-mm-dd",
  changeMonth: true,
  changeYear: true,
  maxDate: "+0D"
});

});
</script>

answered Aug 18, 2016 at 7:19

cookiesncream

819 bronze badges

Comments

Miquel Correa Casablanca · Accepted Answer · 2016-05-09 09:51:21Z

I know this question is old but may be It can help other people:

The best practice to include js in wordpress is to do it using It's queuing function in the php template:

wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js', array ( 'jquery' ), 1.1, true);

(seen here)

It allows to declare the dependencies of your script, in this case, the jquery datepicker. You can check de built-in scripts that wordpress can provide in:

https://developer.wordpress.org/themes/basics/including-css-javascript/#default-scripts-included-and-registered-by-wordpress

Wordpress provide dependencies specifically for jquery datepicker so you could include your script with something like:

wp_enqueue_script( 'script', 'mypath' . '/js/script.js', array ( 'jquery', 'jquery-ui-datepicker' ), 1.7, true);

Note that if you only declare the jquery dependency you'll get an error like

'jQuery.datepicker(...) is not a function'

since the datepicker functions are not included in the base wordpres jquery.

H0miet · Accepted Answer · 2013-08-22 14:27:09Z

1

I don't have much experience with wordpress so I might be out of line trying to help. I have used pickadate though.

In the past I've gotten this error before

Uncaught TypeError: Object [object Object] has no method 'datepicker'

It's usually occurs because I didn't load the js files in the right order. Looking in developer tools on your site I don't see where the pickadate plugin is even loaded. I would check (if you haven't yet) to make sure the plugin is being loaded as well as being loaded in the right order.

answered Aug 22, 2013 at 14:27

H0miet

911 silver badge11 bronze badges

1 Comment

Iconoclast Over a year ago

do you know what reference I need to use to be able to use the datepicker? I tried but it's still not working

Vishal T · Accepted Answer · 2016-02-20 20:35:03Z

1

I know this is an old issue. I had this same issue and it was because of including jquery.min.js along with jquery-1.10.2.js and jquery-ui.js. So by removing jquery.min.js my issue of TypeError: $(...).datepicker is not a function got resolved. Hope it helps to someone.

answered Feb 20, 2016 at 20:35

Vishal T

236 bronze badges

Comments

Juno Paulo De Guzman · Accepted Answer · 2013-10-18 01:01:28Z

0

Okay , I have the same problem a while ago and the solution to the problem is just to add to include the jquery.ui.datepicker.js it is included in the jquery package. However i am still wondering why I have to include this because Im using jquery.ui before and the jquery.ui.custom or simply the jquery js file will do the .datepicker() function for me.

Anyway it's still nice it now working . Hope this helps.

answered Oct 18, 2013 at 1:01

Juno Paulo De Guzman

211 bronze badge

1 Comment

Dil. Over a year ago

hey can you give me the cdn of this. Can't find

Vidmantas Norkus · Accepted Answer · 2015-10-27 14:41:06Z

0

I moved all scripts from footer to head then things started to work propertly

answered Oct 27, 2015 at 14:41

Vidmantas Norkus

1

Comments

Web Application Developer · Accepted Answer · 2018-01-11 17:52:49Z

0

I had a similar issue but only on firefox browser. We are using require to load the js files. I had following lines in my javascript.

require(['jquery', 'jqueryui'], function ($) {
    $(document).ready(function () {
        $("#form1").validationEngine({ bindButtons: $(".bindButton") });

        $("#txtBidDate").datepicker({dateFormat: 'mm-dd-yy'});
        $("#txtInstDate").datepicker({dateFormat: 'mm-dd-yy'});
    });

Require loads js files asynchroulsy and the order is not gauranteed unless you define shim config or if your js files are all loaded as AMD. In our case, jquery was loaded after jquery-ui. We defined in main.js for require that jquery-ui has dependency on jquery. This fixed it for us

answered Jan 11, 2018 at 17:52

Web Application Developer

3472 silver badges9 bronze badges

Collectives™ on Stack Overflow

JS/jQuery TypeError: jQuery(...).datepicker is not a function

10 Answers 10

5 Comments

1 Comment

1 Comment

Comments

Comments

1 Comment

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

10 Answers 10

5 Comments

1 Comment

1 Comment

Comments

Comments

1 Comment

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related