我正在尝试使用语义UI日历，其中您有一个日期输入字段，并且在选择它时会弹出一个日历，如第一个示例所示。我不熟悉这个过程，所以我不确定我是否正确链接了.js文件，或者它是否是其他东西。我查看了其他问题并看到了jquery的提及，但再次不确定如何检查这是否是问题所在。
工具： 网络风暴，节点.js
过程：
1： npm install --save semantic-ui-calendar (安装说明参考(
2：添加了以下代码并尝试将它们链接在一起
3：npm 启动(在本地主机上运行(
4：页面加载，输入字段和其他所有内容显示，日历无法显示
.HTML：
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/node_modules/semantic-ui-calendar/dist/calendar.min.js"></script>
<link rel="stylesheet" href="/node_modules/semantic-ui-calendar/dist/calendar.min.css" />
<script src="/utils/calendar.js"></script>
</head>
<body>
<div>
<div class="ui calendar" id="example1">
<div class="ui input left icon">
<i class="calendar icon"></i>
<input type="text" placeholder="Date/Time">
</div>
</div>
</div>
</body>
</html>
Javascript文件：
$('#example1').calendar();
$('#example2').calendar({
type: 'date'
});
$('#example3').calendar({
type: 'time'
});
$('#rangestart').calendar({
type: 'date',
endCalendar: $('#rangeend')
});
$('#rangeend').calendar({
type: 'date',
startCalendar: $('#rangestart')
});
$('#example4').calendar({
startMode: 'year'
});
$('#example5').calendar();
$('#example6').calendar({
ampm: false,
type: 'time'
});
$('#example7').calendar({
type: 'month'
});
$('#example8').calendar({
type: 'year'
});
$('#example9').calendar();
$('#example10').calendar({
on: 'hover'
});
var today = new Date();
$('#example11').calendar({
minDate: new Date(today.getFullYear(), today.getMonth(), today.getDate() - 5),
maxDate: new Date(today.getFullYear(), today.getMonth(), today.getDate() + 5)
});
$('#example12').calendar({
monthFirst: false
});
$('#example13').calendar({
monthFirst: false,
formatter: {
date: function (date, settings) {
if (!date) return '';
var day = date.getDate();
var month = date.getMonth() + 1;
var year = date.getFullYear();
return day + '/' + month + '/' + year;
}
}
});
$('#example14').calendar({
inline: true
});
$('#example15').calendar();
我认为它不起作用，因为您忘记导入 Jquery 插件，您可以使用 cdn 来完成：
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
如果你使用Jquery，你的javascript文件不好，你必须通过以下方式启动文件：
$(document).ready(function() {
/* YOUR JAVASCRIPT CODE INSIDE */
});
和平
它不起作用，因为Semantic UI v2.3.3不提供日历功能。您可以在检查部分签到;它将抛出错误。如果要使用日历，则需要将semantic.js文件降级为v2.1.4。