Question

我最近开始使用html和css，我被时间选择器困住了。基本上，我正在为我的网站创建一个表单，其中包括选择时间和日期。我的日期选择器工作正常（它覆盖日历），但我的时间选择器下拉菜单根本不做任何事情。我尝试了许多解决方案，但没有一个工作过。当我将代码粘贴到代码段时，我遇到了以下错误;

$（）...时间选择器不是函数

我尝试了很多解决方案，包括按照This的建议添加bootstrap.min.js和jquery-1.11.1.min.js，但没有运气。

非常感谢，哈萨姆

$(function() {
    $( "#datepicker1" ).datepicker();
});
 $( "#timepicker" ).timepicker();

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <title>Javascript</title>
        <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
        <link rel="styleshee" type="text/css" href="jquery.timepicker.css" />
        <link rel="stylesheet" type="text/css" href="bootstrap-datepicker.css">
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <link rel="stylesheet" href="css/bootstrap-theme.min.css">
        <link rel="stylesheet" href="css/fontAwesome.css">
        <link rel="stylesheet" href="css/hero-slider.css">
        <link rel="stylesheet" href="css/tooplate-style.css">

        <link rel="stylesheet" type = "text/css" href="new.css">
        <link rel="stylesheet" href="hr-timePicker.min.css">

        <script type="text/javascript" src ="script.js"></script> 
       
    </head>
    <body>
            
            <div class = "bgImage">
                   
           <form>
                    
                      <div class="formWrap">
                        <p class = "text">Please Enter Your details</p>
                        <input type="text" name="firstname" placeholder="firstname*" required autofocus />
                        <input type="text" name="lastname" placeholder="lastname*" required />
                        <input type="email" name="email" placeholder="email*" required />
                        <input type="text" class="js--datePicker" id="datepicker1" value="Date*">     
                        <input id="timepicker" class = "timepicker" name="datetime" type="text" required>
                        <input type="submit" id="submit" class="submit" value="Submit" />
                        
    </body>

</html>

enter code here

Answer 1

我更新了你的代码，使用：

在cdn中使用对timepicker js代码的绝对引用

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

并在</body>标记之前添加以下内容：

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

以下是工作片段：

$(function() {
  $("#datepicker1").datepicker();
});

$(function() {
  $('#timepicker').timepicker();
});

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <title>Javascript</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="styleshee" type="text/css" href="jquery.timepicker.css" />
  <link rel="stylesheet" type="text/css" href="bootstrap-datepicker.css">
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="css/bootstrap-theme.min.css">
  <link rel="stylesheet" href="css/fontAwesome.css">
  <link rel="stylesheet" href="css/hero-slider.css">
  <link rel="stylesheet" href="css/tooplate-style.css">

  <link rel="stylesheet" type="text/css" href="new.css">
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css">

  <script type="text/javascript" src="script.js"></script>

</head>

<body>

  <div class="bgImage">

    <form>

      <div class="formWrap">
        <p class="text">Please Enter Your details</p>
        <input type="text" name="firstname" placeholder="firstname*" required autofocus />
        <input type="text" name="lastname" placeholder="lastname*" required />
        <input type="email" name="email" placeholder="email*" required />
        <input type="text" class="js--datePicker" id="datepicker1" value="Date*">
        <input id="timepicker" class="timepicker" name="datetime" type="text" required>
        <input type="submit" id="submit" class="submit" value="Submit" />

        <script src="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script>
</body>

</html>

timepicker没有显示下拉列表

1 个答案: