0
我試圖使用JSP，Java，SQL和JavaScript（DateTimePicker）實現醫生預訂系統。我需要一個系統，可以從數據庫中檢索可用的插槽，以查找將顯示在日曆中的某位醫生。通過MySQL的Javascript DateTimePicker
由於JavaScript是在客戶端，因此無法直接連接到數據庫，因此我無法處理程序的整個部分。
是否有任何可能的建議（數據庫中的保存日期將被檢索並顯示在某個醫生的DateTimePicker上）？
謝謝。
數據庫
CREATE TABLE DOCTOR
(Doctor_id CHAR (20),
Doctor_foreman CHAR (20),
Doctor_surname CHAR (20),
CONSTRAINT PK_Administrator PRIMARY KEY (Doctor_id));
CREATE TABLE DOCTOR_AVAILABILITY
(Doctor_id CHAR(20),
AVAIL_DATES VARCHAR (20),
CONSTRAINT FK1_DOCTOR_AVAILABILITY FOREIGN KEY (Doctor_id) REFERENCES DOCTOR (Doctor_id));
INSERT INTO DOCTOR
VALUES (12345, "Matthew", "John");
INSERT INTO DOCTOR
VALUES (54321, "Hellen", "Kelly");的index.jsp
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!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>Insert title here</title>
</head>
<body>
<br>
<a href="drjohn.jsp">Dr John Availability</a><br>
<br>
<br>
<a href="drkelly.jsp">Dr Kelly Availability</a><br>
<br>
</body>
</html>drjohn.jsp
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
var unavailableDates = ["12-2-2016", '13-2-2016'];
function unavailable(date) {
dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
if ($.inArray(dmy, unavailableDates) == -1) {
return [true, ""];
} else {
return [false, "", "Unavailable"];
}
}
$(function() {
$('#txtCalendarDate1').datepicker({
\t dateFormat: 'yy-mm-dd',
beforeShowDay: unavailable,
\t
\t
\t });
});
</script>
<style>
.ui-datepicker th { background-color: ; }
</style>
</head>
<body>
<table id="tblTest">
<tr id="tr1">
<td>Select appointment date: </td>
<td><input type="text" id="txtCalendarDate1" value="" /></td>
</tr>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
Dr John Availability
<br>
<a href="index.jsp">Home Page</a><br>
</body>
</html>drkelly.jsp
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
var unavailableDates = ["12-2-2016", '13-2-2016'];
function unavailable(date) {
dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
if ($.inArray(dmy, unavailableDates) == -1) {
return [true, ""];
} else {
return [false, "", "Unavailable"];
}
}
$(function() {
$('#txtCalendarDate1').datepicker({
\t dateFormat: 'yy-mm-dd',
beforeShowDay: unavailable,
\t
\t
\t });
});
</script>
<style>
.ui-datepicker th { background-color: ; }
</style>
</head>
<body>
<table id="tblTest">
<tr id="tr1">
<td>Select appointment date: </td>
<td><input type="text" id="txtCalendarDate1" value="" /></td>
</tr>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
Dr Kelly Availability
<br>
<a href="index.jsp">Home Page</a><br>
<br>
</body>
</html>