gpt4 book ai didi

javascript - timepicker 不显示下拉菜单

转载 作者:行者123 更新时间:2023-11-28 02:43:52 25 4
gpt4 key购买 nike

我最近开始玩弄 html 和 css,我被时间选择器困住了。基本上,我正在为我的网站创建一个表单,其中包括选择时间和日期。我的日期选择器工作正常(它显示日历),但是我的时间选择器下拉菜单根本没有做任何事情。我尝试了很多解决方案,但都没有奏效。当我将我的代码粘贴到代码片段时,出现以下错误;

$()... time-picker is not a function

我尝试了很多解决方案,包括按照 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>

在这里输入代码

最佳答案

我更新了您的代码以在 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>

关于javascript - timepicker 不显示下拉菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47022296/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com