0
私は、セマンティックUIカレンダーで日付入力フィールドがあり、カレンダーが選択されたときにポップアップを表示するようにしようとしています。as shown in this first example私はこのプロセスに慣れていないので、.jsファイルを適切にリンクしているかどうか、またはそれが他のものかどうかはわかりません。私は他の問題を見て、jqueryの言及を見ましたが、それが問題かどうかを調べる方法についてもやり直しています。セマンティックUIのカレンダーが表示されない
TOOLS： Webstorm、Node.jsの
PROCESS：
1：NPM --saveセマンティック-UI-カレンダーをインストール(install instructions ref)
2：以下のコードを追加し、それらをリンクしようとしました一緒に
3：NPM開始（ローカルホスト上で実行されている）
4：ページが読み込まれると、入力フィールドと、これまで
のJavascriptファイル<!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>
：私はあなたがjQueryプラグインをインポートすることを忘れているので、それが動作しない、あなたがそれを行うことができると思い
$('#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();