我有一个jsp。当在 JSP 中单击链接时，javascript 函数会添加两个输入文本字段，其 ID 和名称分别为 fromDate、toDate。
我尝试将 datePicker 应用于 fromDate。 我在申请前和申请后都发出了警报。 我收到两个警报。没有 java 控制台错误。但 datePicker 不会应用于 fromDate。
我想知道问题出在哪里。 如果有人能在这方面阐明，我将不胜感激，
-印度
我的 JSP 文件:
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>SB Reports</title>
</head>
<body>
<div id="main">
<c:import url="SBUserNameDisp.jsp" />
<div class="mid-area">
<h2>Reports</h2>
<table border="5" width="970">
<tr>
<td style="vertical-align: top" width="100">
<c:import url="DispUserMenu.jsp" />
</td >
<td style="vertical-align: top" width="100">
<p class="subheading">Reports</p>
<a href="#" onclick="viewFeedback()">View Feedbacks</a>
</td>
<td width="770" style="vertical-align: top" id="displayDataCell">
<p class="subheading" align="center"><br><br><br><br><br><b>Report Area</b>
</p>
</td>
</tr>
</table>
</div>
</div>
</body>
<script type="text/javascript" src="resources/js/jsFunctions.js"/></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" media="screen" type="text/css"
href="resources/css/datepicker.css" />
<script type="text/javascript" src="resources/js/datepicker.js"></script>
<script language="javascript" type="text/javascript">
$(function() {
//$("#datepicker").datepicker("setDate", new Date());
$("#fromDate").datepicker({ dateFormat: "yy-mm-dd" }).val();
$("#toDate").datepicker({ dateFormat: "yy-mm-dd" }).val();
});
</script>
</html>
我的 .js 函数
function viewFeedback(){
var displayDataCell = document.getElementById("displayDataCell");
displayDataCell.innerHTML = buildFeedbackSelection();
alert("INDU1");
setDateForDatepicker();
$('.fromDate').datepicker({ dateFormat: 'yy-mm-dd'});
alert("INDU2");
} // viewFeedback
function setDateForDatepicker(){
var currentDate = new Date();
var day = currentDate.getDate();
var month = currentDate.getMonth() + 1;
var year = currentDate.getFullYear();
if(day < 10) { day = '0' + day;};
if(month < 10) { month = '0' + month;};
var my_date = year + "-" + month + "-" + day;
document.getElementById("fromDate").value=my_date;
document.getElementById("toDate").value=my_date;
} // setDateForDatePicker
function buildFeedbackSelection(){
var str = "";
var qte = "\"";
var date = "";
str += "<table valign=" + qte + "top" + qte + " border=" + qte + "0"
+ qte + " width=" + qte + "100%" + qte + ">";
str += "<tr>";
str += "<td>";
str += "From Date <input type=" + qte + "text" + qte
+ " id=" + qte + "fromDate" + qte
+ " name=" + qte + "fromDate" + qte
+ " value=" + qte + date + qte
+ " class=" + qte + "hasDatepicker" + qte + ">";
str += "</td>";
str += "<td>";
str += "To Date <input type=" + qte + "text" + qte
+ " id=" + qte + "toDate" + qte
+ " name=" + qte + "toDate" + qte
+ " value=" + qte + date + qte
+ " class=" + qte + "hasDatepicker" + qte + ">";
str += "</td>";
str += "<td>";
str += "<input type=" + qte + "button" + qte + " class=" + qte
+ "btn-bg" + qte + " onclick=" + qte + "showFeedback()" + qte
+ " value=" + qte + "Show" + qte + ">  ";
str += "<input type=" + qte + "button" + qte + " class=" + qte
+ "btn-bg" + qte + " onclick=" + qte + "deleteFeedback()"
+ qte + " value=" + qte + "Delete" + qte + ">";
str += "</td>";
str += "</tr>";
str += "<tr>";
str += "<td colspan=" + qte + "3" + qte + "id=" + qte + "reportArea"
+ qte + ">";
str += "<p align=" + qte + "center" + qte + " class=" + qte
+ "subheading" + qte + ">Feedback Data Here</p>";
str += "</td>";
str += "</tr>";
str += "</table>";
return str;
} // buildFeedbackSelection
最佳答案
我在这里发现两个问题。
首先，这个<script> JSP 中的标签将运行并尝试在元素出现在页面上之前将日期选择器附加到元素上:
<script language="javascript" type="text/javascript">
$(function() {
//$("#datepicker").datepicker("setDate", new Date());
$("#fromDate").datepicker({ dateFormat: "yy-mm-dd" }).val();
$("#toDate").datepicker({ dateFormat: "yy-mm-dd" }).val();
});
</script>
那是行不通的。在尝试实例化日期选择器之前，您必须确保页面上存在这些元素，因此您必须等到viewFeedback()之后使用 buildFeedbackSection() 创建这两个输入.
其次，在函数viedFeedback()中您正在尝试按类而不是按 id 获取元素。您提到这两个输入字段是动态创建的，并且 ID 为“fromDate”和“toDate”。在 jQuery(和 CSS)中，ID 由哈希值 # 表示。类由点 . 表示。您必须更改线路
$('.fromDate').datepicker({ dateFormat: 'yy-mm-dd'});
至
$('#fromDate').datepicker({ dateFormat: 'yy-mm-dd'});
关于javascript - 动态输入文本字段 JQuery Datepicker 不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19033557/