$("#datepicker").datepicker is not a function - JavaScript error

Question

I am trying to link together fullcalendar and datepicker to form a nice calendar for myself but am running into the following error with me code :

Error message :

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

Here is my code :

<link rel='stylesheet' type='text/css' href='../fullcalendar/fullcalendar.css' />
<link rel='stylesheet' type='text/css' href='../fullcalendar/fullcalendar.print.css' media='print' />
<link href="../scripts/jquery-ui-1.7.3.custom.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="../Styles/dark-hive/jquery.ui.all.css">
<script src="../jquery/jquery-1.7.1.js"></script>
    <script type='text/javascript' src='../jquery/jquery-ui-1.8.17.custom.min.js'></script>
<script src="../jquery/ui/jquery.ui.core.js"></script>
<script src="../scripts/ui/jquery.ui.datepicker.js"></script>
<script type='text/javascript' src='../fullcalendar/fullcalendar.min.js'></script>

 <script type='text/javascript'>
$(function() {             
    $('#calendar').fullCalendar({ 
        theme: true, 
        header: { 
            left: '', 
            center: '', 
            right: '' 
        }, 
        defaultView: 'agendaDay', 
        editable: false, 
        events: "../fullcalendar/JSONcreator" 
    }); 
    $('#datepicker').datepicker({
        inline: true,
        onSelect: function(dateText, inst) {
            var d = new Date(dateText);
            $('#calendar').fullCalendar('gotoDate', d);
        }
    }); 
})
</script>

Also, is there any way of getting rid of some of the JQuery script calls at the top? There's sooo many, it seems so messy, but I am new to JQuery.

possible duplicate of http://stackoverflow.com/questions/1212696/jquery-ui-datepicker-datepicker-is-not-a-function — Ofir Baruch, Feb 27 '12 at 16:35
I think I have now done this (the code above reflects my change), the error is persisting, however. Thanks for the replies! — Simon Kiely, Feb 27 '12 at 16:56

score 6 · Accepted Answer · answered Feb 27 '12 at 16:41

You're loading fullcalendar.min.js before the page has loaded jquery-1.7.1.js, jquery.ui.core.js and jquery.ui.datepicker.js. Place it below them, otherwise it can't extend their functionality.

You can also reduce your code by placing your jQuery functions in one <script> tag rather than two:

<script type='text/javascript'>
$(function() {             
    $('#calendar').fullCalendar({ 
        theme: true, 
        header: { 
            left: '', 
            center: '', 
            right: '' 
        }, 
        defaultView: 'agendaDay', 
        editable: false, 
        events: "../fullcalendar/JSONcreator" 
    }); 
    $('#datepicker').datepicker({
        inline: true,
        onSelect: function(dateText, inst) {
            var d = new Date(dateText);
            $('#calendar').fullCalendar('gotoDate', d);
        }
    }); 
})
</script>

Thanks for the answer! I have now updated my code above, but the same problem is persisting! — Simon Kiely, Feb 27 '12 at 16:57
Trying clearing your cache. Use Firebug or Chrome's Inspect Element tools to find out where your JavaScript is going wrong. If it's saying things like `$("#datepicker").datepicker is not a function` it generally means that your inline JavaScript function isn't hooking up to your external jQuery library — hohner, Feb 27 '12 at 17:05

score 0 · Answer 2 · answered Feb 27 '12 at 16:42

You can consolidate your jQuery as such:

$(document).ready(function() {
  // fullCalendar             
  $('#calendar').fullCalendar({ 
    theme: true, 
    header: { 
        left: '', 
        center: '', 
        right: '' 
    }, 
    defaultView: 'agendaDay', 
    editable: false, 
    events: "../fullcalendar/JSONcreator" 
  });

  // jQuery UI datepicker
  $('#datepicker').datepicker({
    inline: true,
    onSelect: function(dateText, inst) {
      var d = new Date(dateText);
      $('#calendar').fullCalendar('gotoDate', d);
    }
  }); 
});

You should only have one $(document).ready(function() {}); declaration. Keep it within your <script> tag at the bottom. It's the same as calling an event listener for load as such: window.addEventListener('load', function(){}, false);

Also, make sure that your scripts are loaded before you declare them.

$("#datepicker").datepicker is not a function - JavaScript error

2 Answers2