Javascript DateTimePicker via MySQL

Javascript DateTimePicker via MySQL

本文关键字：MySQL via DateTimePicker Javascript      更新时间：2023-09-26

我正在尝试使用JSP，Java，SQL和JavaScript（DateTimePicker）实现医生的预订系统。我需要一个系统，其中将从数据库中检索某个医生的可用插槽，该插槽将显示在日历中。

我在程序的整个部分遇到问题，因为 JavaScript 位于客户端，因此它无法直接连接到数据库。

是否有任何建议可以实现这一点（数据库中保存的日期将被检索并显示在某个医生的日期时间选择器上）？

谢谢。

数据库

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");

索引.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>

约翰博士.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({ 
	dateFormat: 'yy-mm-dd',
    beforeShowDay: unavailable,
    
	
	
	});
});
</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>

凯利博士.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({ 
	dateFormat: 'yy-mm-dd',
    beforeShowDay: unavailable,
    
	
	
	});
});
</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>

使用 AJAX 调用从服务器检索 JSON 数据（医生列表及其空闲日期）。然后执行 JSON 响应的分析。为每个医生动态创建如此多的DateTimePicker实例，有多少个日期对应于它。对于DateTimePicker的每个实例，请设置日期。

相关文章：