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

Question

I'm getting this error on a form I'm setting up:

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

I've been googling for some time now and have checked several posts about this issue. I have jquery and jquery ui in the correct order but continue to get this problem.

my html (footer)

  <!-- Included JS Files (Compressed) -->
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <script src="/javascripts/foundation.min.js"></script>
  <script src="/javascripts/flexy-menu.js"></script>

  <!-- Initialize JS Plugins -->
  <script src="/javascripts/app.js"></script>
  <script src="/javascripts/lma.js"></script>

Inside lma.js I call the datepicker:

// datepicker 
$(document).ready(function() {
    $('.checkIn, .checkOut').each(function() {
        $(this).datepicker({ dateFormat: 'yy-mm-dd' });
    });
});

Am using foundation 3 and for the life of me can't figure out why I'm getting the Uncaught TypeErrro in the console.

UPDATE form code here:

  <div class="six columns bookForm">
      <form id="reserveNow" action="#">

        <label>Check In<br />
          <input type="text" value="02/24/2013" class="checkIn round">
        </label>

        <label>Check Out</br>
          <input type="text" value="02/27/2013" class="round checkOut">
        </label>

      </form>
  </div><!--twelve columns-->

When you open your console and enter: $.fn.datepicker() what do you see? Perhaps you didn't include the datepicker plugin? — meavo
– meavo, Commented Nov 12, 2013 at 21:18
I get the same error, but the jquery-ui includes datepicker by default. I even downloaded a custom jquery ui and ensured that datepicker was there, but still no dice. — CreateSean
– CreateSean, Commented Nov 12, 2013 at 21:21
Most likely you're including another copy of jquery somewhere, possibly within app.js — user400654
– user400654, Commented Nov 12, 2013 at 21:21
Doesn't foundation.min.js load its own version of jquery? What happens when you leave that out? — erwinheiser
– erwinheiser, Commented Nov 12, 2013 at 21:29
Erwin, when I removed jquery included with foundation I got an error about jquery being undefined. — CreateSean
– CreateSean, Commented Nov 12, 2013 at 21:31

Alexnho · Accepted Answer · 2013-11-12 21:40:14Z

1

The JS it's ok, but I've changed the HTML.
Here's a working example: (Example)

<div class="six columns bookForm">
    <form id="reserveNow" action="#">
        <label for="check-in">Check In</label>
        <input id="check-in" type="text" value="02/24/2013" class="checkIn round" />
        <label for="check-out">Check Out</label>
        <input id="check-out" type="text" value="02/27/2013" class="round checkOut" />
    </form>
</div>
<!--twelve columns-->

Try the new HTML, if it doesn't work then is seems there's a conflict in the JS files.

answered Nov 12, 2013 at 21:40

Alexnho

1363 bronze badges

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

3 Comments

CreateSean Over a year ago

looks like there's a conflict somewhere. Strange as this is pretty much a fresh foundation install with no javascript customizations yet.

Alexnho Over a year ago

Try commenting the js files and keep testing one step at a time. Or maybe there's a conflict between the versions of jquery and jquery UI? On js fiddle I used the 1.9.2 version for UI

CreateSean Over a year ago

turns out that foundation 3, includes jquery and then also has it in foundation.min.js so once I ensured I only had one copy of jquery all was good.

SRay · Accepted Answer · 2013-11-12 21:21:51Z

0

You would have to instantiate the datePicker object. Something like this:

 $( "#datepicker" ).datepicker({
        });

answered Nov 12, 2013 at 21:21

SRay

2861 silver badge5 bronze badges

2 Comments

CreateSean Over a year ago

added that, changed #datepicker to .checkIn (correct selector) and no go.

SRay Over a year ago

I replicated your code in my local machine and it works fine. No issues.

Tushar Gupta - curioustushar · Accepted Answer · 2014-02-12 18:13:27Z

0

I was using jquerytools getting this error, and it seems my includes were in the wrong order. When I put jquerytools ABOVE the jquery-ui, it worked fine:

<script type="text/javascript" src="/js/jquery-1.10.2.min.js"></script>
<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
<script type="text/javascript" src="/js/jquery-ui-1.10.3.min.js"></script>

edited Feb 12, 2014 at 18:13

Tushar Gupta - curioustushar

57.2k24 gold badges106 silver badges110 bronze badges

answered Feb 12, 2014 at 17:53

mydoglixu

9641 gold badge8 silver badges28 bronze badges

Comments

avrahamm · Accepted Answer · 2014-02-23 10:39:28Z

0

In my case including 'jquery-ui.custom.min.js' second time caused the JS conflict . After removing second include it worker properly.

answered Feb 23, 2014 at 10:39

avrahamm

1

Collectives™ on Stack Overflow

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

4 Answers 4

3 Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related