Question

我尝试使用语义UI日历进行实验，其中您有一个日期输入字段，当您选择as shown in this first example时，会弹出一个日历。我不熟悉这个过程，所以我不确定我是否正确链接.js文件或者它是否是别的东西。我已经看过其他问题并看到了jquery，但又不确定如何检查是否存在这个问题。

工具： Webstorm，Node.js

PROCESS：

1：npm install --save semantic-ui-calendar (install instructions ref)

2：添加了以下代码并尝试将它们链接在一起

3：npm start（在本地主机上运行）

4：页面加载，输入字段和其他一切wdisplays，日历无法显示

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();

Answer 1

我认为它不起作用，因为你忘了导入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  */
 });

和平

Answer 2

由于Semantic UI v2.3.3不提供日历功能，因此无法使用。您可以在检查部分检查；它将引发错误。如果要使用日历，则需要将semantic.js文件降级为v2.1.4。

语义UI日历未显示

2 个答案: