[英]$(“#datepicker”).datepicker is not a function - JavaScript error
我正在尝试将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还是陌生的。
你加载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>
您可以这样合并您的jQuery:
$(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);
}
});
});
您应该只有一个$(document).ready(function() {});
宣言。 将其保留在底部的<script>
标记内。 就像调用事件监听器进行load
一样: window.addEventListener('load', function(){}, false);
另外, 在声明脚本之前 ,请确保已加载脚本。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.