Javascript 无法让jQuery插件-timepicker-在jsp页面中工作_Javascript_Jquery_Html_Css_Jsp

Javascript 无法让jQuery插件-timepicker-在jsp页面中工作

javascript jquery html css jsp

Javascript 无法让jQuery插件-timepicker-在jsp页面中工作,javascript,jquery,html,css,jsp,Javascript,Jquery,Html,Css,Jsp,嘿，伙计们，所以我不能让jquery插件工作-时间选择器-我有一个日期选择器已经设置和工作。我已经研究了很多小时，我尝试了不同的插件。下载插件，将.js文件导入我的projects resources/js文件夹（顺便说一句，我使用的是spring），然后将.css文件（计时器的）复制到resources/css文件夹。然后我在导入标准jquery库的脚本下面添加一个脚本来导入插件……下面您可以看到我是如何实现它的。谢谢你的帮助 <%@ taglib uri="http://java.su

嘿，伙计们，所以我不能让jquery插件工作-时间选择器-我有一个日期选择器已经设置和工作。我已经研究了很多小时，我尝试了不同的插件。下载插件，将.js文件导入我的projects resources/js文件夹（顺便说一句，我使用的是spring），然后将.css文件（计时器的）复制到resources/css文件夹。然后我在导入标准jquery库的脚本下面添加一个脚本来导入插件……下面您可以看到我是如何实现它的。谢谢你的帮助

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page session="false" %>
<html>
<head>
<title>Home</title>
<link rel='stylesheet' type='text/css' href='<c:url value="/resources/css/styles.css" />' />
<link rel='stylesheet' type='text/css' href='<c:url value="/resources/css/jquery- ui-1.10.3.custom.min.css" />' />
<link rel='stylesheet' type='text/css' href='<c:url value="/resources/css/jquery.timepicker.css" />' />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src='<c:url value="/resources/js/jquery-ui-1.10.3.custom.min.js" />'></script>
<script src='<c:url value="/resources/js/jquery.timepicker.min.js" />'></script>
<script>
$(function() {
  $("#dateStart").datepicker();
  $("#dateEnd").datepicker();
});
</script>
<script>
$(function() {
 $('.timeStart').timepicker();
});
</script>
</head>
<body>
<div id='header-container'>
<div id='header-content'>
    <a href='<c:url value="/" />'>414Cal</a>
    <div id='header-content-right'>
        <a href='<c:url value="/signout" />'>Sign Out, ${ user.email }</a>
    </div>
</div>
</div>
<div id='body-content'>
<h1>
    414Cal Event Creator
</h1>
<c:if test="${!empty username}">
    ${username = "User"}
</c:if>
<h3>
    ${username}
</h3>
<form action='<c:url value="/createEvent" />' method='post'>
    <p><input type='text' name='eventTitle' size='58' placeholder='Title' /></p>
    <p><input type='text' name='eventLocation' size='58' placeholder='Location' /></p>
    <p><textarea name='eventDescription' rows='5' cols='42'     placeholder='Description'></textarea></p>
    <p>Start<input type='text' name='dateStart' id='dateStart' /> <input type='text'  name='.timeStart' id='.timeStart' /> to <input type='text' name='dateEnd' id='dateEnd' /></p>
    <p><input type='checkbox' name='allDay'> All day</p>
    <p><input type='checkbox' name='repeat' id='repeat'> Repeat</p> 
    <p><input type='submit' /></p> 
</form>

}

</div>
</body>
</html>


家
$（函数（）{
$（“#dateStart”）.datepicker（）；
$（“#dateEnd”）.datepicker（）；
});
$（函数（）{
$（'.timeStart'）.timepicker（）；
});
414Cal事件创建者
${username=“User”}
${username}



开始
整天
重复

}

您正在初始化datepicker的HTML元素不会出现在JSP文件中

这是更新的代码，谢谢

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page session="false" %>
<html>
<head>
<title>Home</title>
<link rel='stylesheet' type='text/css' href='<c:url value="/resources/css/styles.css" />' />
<link rel='stylesheet' type='text/css' href='<c:url value="/resources/css/jquery-     ui-1.10.3.custom.min.css" />' />
<link rel='stylesheet' type='text/css' href='<c:url     value="/resources/css/jquery.timepicker.css" />' />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>
<script        src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>></script>
<script src='<c:url value="/resources/js/jquery-ui-1.10.3.custom.min.js" />'></script>
<script src='<c:url value="/jquery.timepicker.min.js" />'></script>

<script type="text/javascript" src="js/jquery.timepicker.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.timepicker.css" />

<script type="text/javascript" src="lib/base.js"></script>
<link rel="stylesheet" type="text/css" href="lib/base.css" />

<script>
$(function() {
  $("#dateStart").datepicker();
  $("#dateEnd").datepicker();
});

$(function() {
    $('timestart').timepicker();

  });
</script>

</head>
<body>
<div id='header-container'>
<div id='header-content'>
    <a href='<c:url value="/" />'>414Cal</a>
    <div id='header-content-right'>
        <a href='<c:url value="/signout" />'>Sign Out, ${ user.email }</a>
    </div>
</div>
</div>
<div id='body-content'>
<h1>
    414Cal Event Creator
</h1>
<c:if test="${!empty username}">
    ${username = "User"}
</c:if>
<h3>
    ${username}
</h3>
<form action='<c:url value="/createEvent" />' method='post'>
    <p><input type='text' name='eventTitle' size='58' placeholder='Title' /></p>
    <p><input type='text' name='eventLocation' size='58' placeholder='Location' /></p>
    <p><textarea name='eventDescription' rows='5' cols='42'     placeholder='Description'></textarea></p>
    <p>Start<input type='text' name='dateStart' id='dateStart' /> <input id="timestart"     type="text" class="time" /> to <input type='text' name='dateEnd' id='dateEnd' /></p>
    <p><input type='checkbox' name='allDay'> All day</p>
    <p><input type='checkbox' name='repeat' id='repeat'> Repeat</p> 
    <p><input type='submit' /></p>

</form>


</div>
</body>
</html>


家
>
$（函数（）{
$（“#dateStart”）.datepicker（）；
$（“#dateEnd”）.datepicker（）；
});
$（函数（）{
$（'timestart'）.timepicker（）；
});
414Cal事件创建者
${username=“User”}
${username}



开始
整天
重复

加载jsp页面后，我在控制台底部看到了这一点。多谢各位

警告：org.springframework.web.servlet.PageNotFound-在名为“appServlet”的DispatcherServlet中找不到URI为[/calendar/jquery.timepicker.min.js]的HTTP请求的映射警告：org.springframework.web.servlet.PageNotFound-在名为“appServlet”的DispatcherServlet中找不到URI为[/calendar/js/jquery.timepicker.js]的HTTP请求的映射

警告：org.springframework.web.servlet.PageNotFound-在名为“appServlet”的DispatcherServlet中找不到URI为[/calendar/css/jquery.timepicker.css]的HTTP请求的映射。

我想我的问题用词不对，datepicker工作正常，是timepicker不工作，还有一行不正确，应该是这样的$(“#timeStart”）.timepicker（）；你是说我需要先初始化HTML元素吗？谢谢you@user3020017哦，好的，抱歉：-）我想我看到了问题。您的选择器正在查找ID为“timestart”的元素。但是，您元素的ID为“.timestart”。如果您从ID中删除点，它应该会工作。谢谢您，尼尔，但是它不工作……我会的将在下面发布代码的更新版本…thanksChange$（'timestart'）。timepicker（）；到$（'#timestart'）。timepicker（）；jQuery使用CSS选择器进行DOM遍历。在CSS中选择ID的前缀为#。