语义UI日历未显示
语义UI日历未显示
提问于 2017-08-21 20:15:47
我正在尝试语义UI Calendar，其中您有一个日期输入字段，当您选择它as shown in this first example时，会弹出一个日历。我不熟悉这个过程，所以我不确定我是否正确地链接了.js文件，或者它是否是其他文件。我看过其他问题，看到有提到jquery，但还是不确定如何检查这是不是问题所在。
工具: Webstorm、Node.js
进程：
1: npm安装--保存语义-ui-日历(install instructions ref)
2:添加了以下代码，并尝试将它们链接在一起
3: npm start (在本地主机上运行)
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();回答 2
Stack Overflow用户
发布于 2017-08-21 22:22:44
我认为它不能工作，因为你忘记导入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 */
});和平
Stack Overflow用户
发布于 2018-08-04 07:27:57
它不会工作，因为Semantic UI v2.3.3不提供日历功能。您可以在inspect部分进行检查；它将抛出一个错误。如果你想使用日历，你需要将你的semantic.js文件降级为v2.1.4。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45796917
复制相关文章
相似问题
腾讯云开发者
