我正在尝试语义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();
发布于 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 */
});
和平
发布于 2018-08-04 07:27:57
它不会工作,因为Semantic UI v2.3.3
不提供日历功能。您可以在inspect部分进行检查;它将抛出一个错误。如果你想使用日历,你需要将你的semantic.js
文件降级为v2.1.4
。
https://stackoverflow.com/questions/45796917
复制相似问题