Question

我无法让jquery timepicker为我的网络应用程序工作，尽管我设法让日期选择器工作。我认为问题在于我在标题中包含的信息。我没有提供合适的东西吗？脚本标签甚至意味着什么？我在与html文件相同的目录中有jquery.timepicker.css / js的副本，但是我需要在html文件的头部引用那些吗？

<!DOCTYPE html>
<html>
<head>
  <title>Columbia Ride Share</title>
  <meta charset="utf-8"/>
  <link rel="stylesheet" type="text/css" href="post-ride.css">
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Datepicker - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
      $( "#datepicker" ).datepicker();
  } );
  </script>
  <script>
  $(document).ready(function(){
      $('input.timepicker').timepicker({});
  });
  </script>
  <script>
  $("timepicker").timepicker({
      startTime: "00.00"
      timeFormat: 'h:mm p',
      interval: 60,
      endTime: new Date(0, 0, 0, 15, 30, 0), 
      separator: ':',
      step: 15});
  </script>
</head>
<body>
  <header> 
       // .....
  </header>
  <div class = "form">
      <form action="action_page.php">
         <label for="airport">Airport</label>
         <select id="airport" name="airport">
             <option value="jfk">JFK</option>
             <option value="laguardia">Laguardia</option>
             <option value="newark">Newark Liberty</option>
         </select>

         <label for="day">Day</label>
         <input type="text" id="datepicker">

         <label for="time">Time</label>
         <p>Between</p> <input type="text" class="timepicker"> 
         <p>And</p><input type="text" id="timepicker">

   </div>
<script src="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script>

</body>
</html>

Answer 1

您可以尝试删除cdn link标记：

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css">

并且只使用与html文件位于同一目录中的jquery.timepicker.css / js文件。是的，您可以通过引用head部分中的那些文件来使用它们。

Answer 2

在HTML中，必须在<script> and </script>标记之间插入JavaScript代码。您可以在HTML文档中放置任意数量的脚本。脚本可以放在HTML页面中，也可以放在HTML页面中，或者放在两者中。 head中的脚本将在页面加载期间首先执行，body中的脚本将在到达时执行。在您的情况下，您所做的错误是在body标签内声明库并在head标签中使用它。因此在页面初始化期间，它不知道timepicker。您必须在timepicker初始化代码之前编写脚本标记以包含timepicker.js。要做到这一点，你需要在初始化代码之前将timepicker.js的CDN导入移动到head中，或者你可以在timepicker CDN import之后将初始化代码从头到脚移动。

Jquery Timepicker脚本标签

2 个答案: