语义界面日历不显示

我在尝试使用语义界面日历进行实验，当您选择日期输入栏和日历时，会弹出一个日历as shown in this first example。我不熟悉这个过程，所以我不确定我是否正确链接.js文件或者是否是其他内容。我查看了其他问题并看到了jquery的提及，但又不确定如何检查是否是问题所在。语义界面日历不显示

工具： Webstorm，Node.js的

过程：

1：NPM安装--save语义的UI日历(install instructions ref)

2：添加下面的代码，并试图将它们连接一起

3：NPM启动（本地主机上运行）

4：页面负载，输入字段和不断ything其他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();

来源

2017-08-21 NGrant

我想是因为你忘记导入jQuery插件，它不工作，你可以做到这一点与cdn：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

而你的javascript文件不好，如果你使用jquery，你必须明星

$(document).ready(function() { 
     /* YOUR JAVASCRIPT CODE INSIDE */ 
});

和平

：用t文件

来源

2017-08-21 14:22:43 SD3L

语义界面日历不显示

回答

相关问题