$("#datepicker").datepicker不是函数 - JavaScript错误

Question

我试图将fullcalendar和datepicker链接在一起为我自己形成一个漂亮的日历,但我遇到了以下错误代码:

错误信息 :

$("#datepicker").datepicker不是一个函数

这是我的代码:

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

另外,有没有办法摆脱顶部的一些JQuery脚本调用？有太多,看起来很混乱,但我是JQuery的新手.

Answer 1

您在fullcalendar.min.js页面加载之前加载jquery-1.7.1.js,jquery.ui.core.js并且jquery.ui.datepicker.js.将它放在它们下面,否则它不能扩展它们的功能.

您还可以通过将jQuery函数放在一个<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>