通过 MySQL 的 Javascript DateTimePicker-6ren

通过 MySQL 的 Javascript DateTimePicker

转载作者：行者123 更新时间：2023-11-29 21:29:19

25

4

我正在尝试使用 JSP、Java、SQL 和 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({ 
	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>

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({ 
	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 的每个实例设置日期。

关于通过 MySQL 的 Javascript DateTimePicker，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35368447/

25

4

0

文章推荐： mysql - 使用命令行修剪 csv 文件

文章推荐： mysql - MySQL 中 INSERT INTO 和 LOAD DATA from CSV 的区别

文章推荐： javascript - AngularJS 将数据作为键值对发布到 asp.net 页面

文章推荐： javascript - jQuery 方法 $.on 返回什么？

datetimepicker - XDSoft DateTimePicker - 禁用星期日
是否可以在 XDSoft DateTimePicker 中禁用所有指定的工作日，例如所有(且仅)星期日？如何做到这一点？最佳答案试试这个。 function disabledWeekdays(da
datetimepicker - 在内联 datetimepicker tempusdominus 中设置几个初始日期
我正在尝试设置日期时间选择器 https://tempusdominus.github.io/bootstrap-3/并将其配置为内联使用。它初始化为: $('#datetimepicker5').d
datetimepicker - 在 DateTimePicker 中设置小时超过 23
在我的项目中，我需要使用格式为 HH:MM 的 Timepicker，但我使用它就像持续时间，而不是时间，所以有可能将 HH 增加到 99，而不是在 23 停止! 我使用此页面中的日期时间选择器:ht
eonasdan-datetimepicker - 如何将关闭文本添加到 datetimepicker bootstrap？
$(function() { $('input.month-mode').datetimepicker({ viewMode: 'months', format
datetimepicker - 如何将 datetimepicker 月份名称格式设置为三位数，例如。简
我正在使用 Bootstrap 日期时间选择器。我想要 datetimepicker 格式作为短月份名称，例如。一月。我的代码在下面，它现在显示完整的月份名称为 January。如何让它成为 Jan
javascript - 将 datetimepicker 的最小日期设置为另一个 datetimepicker 的选定日期
我有两个文本框:txtETCdatefrom 和 txtETCdateto 分别具有类 datetimepicker1 和 datetimepicker2: 我在两个类上都使用仅日期格式的日期时间
html - Bootstrap datetimepicker 在打开另一个 datetimepicker 时关闭
我目前正在使用 http://eonasdan.github.io/bootstrap-datetimepicker/ 如果我打开另一个日期时间选择器，我们如何关闭一个打开的日期时间选择器？因为我有
c# - DateTimePicker.selectedDate 不同于 DateTimePicker.Text
我有一个 dateTimePicker。为了将这个 DateTimePicker 内容写入我的数据库，我得到了值: myDateTimePicker.selectedDate.value. 当用户手动
c# - 基于另一个 datetimepicker 在 jquery datetimepicker 中设置日期和时间
它可以正常工作，直到触发任何控件回发，但是当控件触发任何回发事件时，如果我们将“起始日期”更改为“截止日期”日期时间选择器，则它仅显示日期而不是日期和时间。当我更改“截止日期”与“起始日期”datet
javascript - Bootstrap DateTimePicker : Open one datetimepicker at a time
我有一个包含多个日期时间选择器的 html 模板。如果我单击按钮打开一个日期时间选择器，然后单击另一个按钮打开新的日期时间选择器，则第一个保持不变(它不会关闭)。我希望一次只能打开一个日期时间选择器。
javascript - xdan/datetimepicker - datetimepicker( {'setOptions' , {highlightedDates : [] } }) is not updated - calendar view is not updated
我正在尝试更新/更改日历 View 中突出显示的日期。但当日历显示时，它们不会在下一个事件中更新。有工作中的 Plunker 片段: https://plnkr.co/edit/4HkCp5?p=p
javascript - MVC 5 Bootstrap.v3.Datetimepicker.CSS 错误 : Object doesn't support property or method 'datetimepicker'
我正在构建一个 MVC 5 应用程序，我正在尝试使用 Bootstrap.v3.Datetimepicker.CSS . 我有一个 Javascript 文件 $(document).ready( f
jquery - DateTimePicker:禁用所有过去的日期和时间选择
我基本上希望我的 Jquery:dateTimePicker 只允许 future 的日期——也就是说，如果当前日期时间是:2016 年 8 月 30 日，上午 10:20，那么我想选择一个大于 10
wpf - DateTimePicker 设置日历和时间文化
是否可以为 DateTimePicker 控件设置特定的文化？我想在飞蛾的格式名称和时间格式上使用这种特定的文化。例如，我创建了特定的文化: CultureInfo.GetCultureInfo("s
c# - DateTimePicker 获取焦点字段
我正在尝试确定在 DateTimePicker (WinForms) 应用程序中选择(突出显示)了哪个控件(天、月、年)。是否有一个属性指示选择了哪个控件？如果是这样，我能否以编程方式仅更改另一个控件
c# - 仅更改月份和年份的 DateTimePicker
UI 应该保持不变我不想这样做: dateTimePicker1.Format = DateTimePickerFormat.Custom; dateTimePicker1.CustomFormat
jQuery - DateTimePicker - 制作删除当前时间所需的时间
所以我使用 jQuery DateTimePicker，目前我有以下设置: jQuery(document).ready(function($) { jQuery.datetimepick
datetimepicker - NgPickDateTime 显示军用时间
我正在为我的应用程序使用 ng-pick-datetime 选择器。我希望选定的时间在 24 小时内显示(15:00 而不是下午 3:00)。 When the picker opens the ti
javascript - 更改时验证字段 - datetimepicker
我有一个使用日期选择器和验证器的字段。在下面的示例中，我已预先填写了日期输入。现在，删除数据，您将看到它不再有效。然后单击日历图标选择日期。在您离开输入(模糊)之前，它不会重新验证，但我宁愿它在从日期
javascript - Datetimepicker 不使用给定的格式
我目前正在使用 Date time picker JQuery，但它没有使用给定的格式。它没有使用它，而是使用默认的日期格式，并在控制台中给出错误:Uncaught TypeError: F.mask

首页

博学

6Ren·AI

商城

通过 MySQL 的 Javascript DateTimePicker