时间选择器未正确加载

问题描述

头

<link rel='stylesheet' type='text/css' href='https://jonthornton.github.io/jquery-timepicker/jquery.timepicker.css'></link>
<script src='https://jonthornton.github.io/jquery-timepicker/jquery.timepicker.js'></script>

身体

<td class='int_label'>Start Time: </td>
<script>$('.timepicker').each(function(){ 
$(this).timepicker();});
</script><td >
<input type='text'  name='start_time_0' id='timepicker' class='timepicker'  /></td>

它正在执行，我可以看到它填充了一些东西，但是结果太脏了：

只有一个输入接收代码
我可以看到“时间”的很多部分在屏幕上分散开来，最终没有显示下拉菜单

我的错误是什么？我正在加载几个库是否重要：

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js'></script><link rel='stylesheet' type='text/css' href='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css'></link><link rel='stylesheet' type='text/css' href=''>
<Meta name="viewport" content="width=device-width,initial-scale=1"><link href="../library/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="simple.css" /><script>

解决方法

在测试您的代码时，我发现您错过了在代码头中调用jquery.min.js文件的机会。

<script>$('.timepicker').each(function(){ $(this).timepicker();});</script>

<link rel='stylesheet' type='text/css' href='https://jonthornton.github.io/jquery-timepicker/jquery.timepicker.css'></link>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src='https://jonthornton.github.io/jquery-timepicker/jquery.timepicker.js'></script>


<td class='int_label'>Start Time: </td>
 
<td><input type='time'  name='start_time_0' id='timepicker' class='timepicker'  /></td>

OR you can check with this 
https://www.jonthornton.com/jquery-timepicker/

jquery timepicker timepicker