Question

嘿伙计，所以我不能得到一个jquery插件工作 - timepicker - 我有一个datepicker已经设置和工作。我研究了很多个小时，我尝试了不同的插件。我正在做的程序....下载插件，将.js文件导入我的项目资源/ js文件夹（我顺便使用spring），然后将.css文件（timepicker）复制到资源/ 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>

Answer 1

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

Answer 2

这是更新的代码，谢谢

<%@ 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>

Answer 3

我在加载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请求的映射

无法获得jQuery插件 - timepicker - 在jsp页面中工作

3 个答案: