語義UI日歷未顯示

Question

我正在嘗試使用語義UI日歷進行實驗，其中有一個日期輸入字段，並且如第一個示例所示，選擇日歷時會彈出一個日歷。 我不熟悉此過程，因此無法確定是否正確鏈接了.js文件或其他內容。 我查看了其他問題，並提到了jquery，但再次不確定如何檢查這是否是問題。

工具：Webstorm，Node.js

處理：

1：npm install --save語義UI日歷（安裝說明參考）

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

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文件降級到v2.1.4 。

語義UI日歷未顯示

問題描述

2 個解決方案

解決方案1
3 2017-08-21 14:22:43

解決方案2
1 2018-08-03 23:27:57

語義UI日歷未顯示

問題描述

2 個解決方案

解決方案1 3 2017-08-21 14:22:43

解決方案2 1 2018-08-03 23:27:57

解決方案1
3 2017-08-21 14:22:43

解決方案2
1 2018-08-03 23:27:57