javascript - 日期选择器显示在文本框字段后面的问题
问题描述
我创建了一个jsp页面,如下所示:
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!doctype html>
<html lang="en">
<head>
<title>Register New Patient</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Reference Bootstrap files -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link type="text/css"
rel="stylesheet"
href="${pageContext.request.contextPath}/resources/css/background-color.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function () {
$("#datepicker").datepicker({dateFormat: 'dd/mm/yy'})
});
</script>
<style>
.error {color:red}
</style>
</head>
<body>
<h1>Registration</h1>
<hr>
<div>
<div id="registrationbox" style="margin-top: 50px;"
class="mainbox col-md-4 col-md-offset-4 col-sm-8 col-sm-offset-2">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="panel-title">Register As Patient</div>
</div>
<div style="padding-top: 30px" class="panel-body">
<!-- Registration Form -->
<form:form action="${pageContext.request.contextPath}/register/processPatientRegistrationForm"
modelAttribute="mytonMedicalUser"
class="form-horizontal">
<!-- Place for messages: error, alert etc ... -->
<div class="form-group">
<div class="col-xs-15">
<div>
<!-- Check for registration error -->
<c:if test="${registrationError != null}">
<div class="alert alert-danger col-xs-offset-1 col-xs-10">
${registrationError}
</div>
</c:if>
</div>
</div>
</div>
<!-- User name -->
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<form:errors path="userName" cssClass="error" />
<form:input path="userName" placeholder="username (*)" class="form-control" />
</div>
<!-- Password -->
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<form:errors path="password" cssClass="error" />
<form:password path="password" placeholder="password (*)" class="form-control" />
</div>
<!-- Confirm Password -->
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<form:errors path="matchingPassword" cssClass="error" />
<form:password path="matchingPassword" placeholder="confirm password (*)" class="form-control" />
</div>
<!-- First name -->
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<form:errors path="firstName" cssClass="error" />
<form:input path="firstName" placeholder="first name (*)" class="form-control" />
</div>
<!-- Last name -->
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<form:errors path="lastName" cssClass="error" />
<form:input path="lastName" placeholder="last name (*)" class="form-control" />
</div>
<!-- Email -->
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<form:errors path="email" cssClass="error" />
<form:input path="email" placeholder="email (*)" class="form-control" />
</div>
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<form:errors path="gender" cssClass="error" />
<form:select path="gender" class="form-control">
<form:option value="male" label="Male" />
<form:option value="female" label="Female" />
</form:select>
</div>
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<form:errors path="dob" cssClass="error" />
<label for="datepicker">Enter Your Date of Birth (*):</label>
<input type="text" name="dob" id="datepicker">
</div>
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<form:errors path="address" cssClass="error" />
<form:input path="address" placeholder="address (*)" class="form-control" />
</div>
<div style="margin-top: 10px" class="form-group">
<div class="col-sm-6 controls">
<button type="submit" class="btn btn-primary">Register</button>
</div>
</div>
</form:form>
</div>
</div>
</div>
</div>
</body>
</html>
我知道这与日期选择器的 z-index 有关......但是我不确定如何更改标签中引导 datepicker 的 z-index,因为编辑 z-index 与 css 相关。
有没有办法可以在标签中执行此操作或其他一些简单的方法,以便它显示在我的文本框前面?
解决方案
推荐阅读
- azure - 托管标识导致 Azure 数据工厂中的 Azure 函数链接服务失败
- c# - 使用 PingIdentity 作为 IDP 的 SAML SSO
- c# - C# windows 应用程序表单中的 Web 浏览器,不使用 Web 浏览器类
- c - Autosar 经典架构中 SWC 中实现的任务
- python - 在回归问题中改变输入大小:LSTM
- scala - 无法升级到 Scala 2.13.6
- python - 在二进制文件中搜索时,如何在 FIND Python 函数中使用模式“任何字符”?
- python - 从熊猫的列中删除空格
- python - 如何通过 selenium py 运行带有 axios 的脚本?
- c# - Xamarin 黑色启动画面