我为登记表写了一些代码，我正在使用Bootstrap Datepicker输入出生日期。我似乎无法让它发挥作用，尝试了我在研究中找到的其他解决方案，但出于这样或那样的原因，我无法掌握如何使它发挥作用。
我才刚刚开始学习这些范式：(
有人有什么建议吗？
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" th:href="@{/webjars/bootstrap/3.3.7/css/bootstrap.min.css}" />
<link rel="stylesheet" type="text/css" th:href="@{assets/bootstrap-datepicker/css/bootstrap-datepicker.css}"/>
<link rel="stylesheet" type="text/css" th:href="@{assets/bootstrap-datepicker/css/bootstrap-datepicker.standalone.css}"/>
<title>Registration</title>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span> <span
class="icon-bar"></span> <span class="icon-bar"></span> <span
class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#" th:href="@{/}">Registration and
Login Module</a>
</div>
</div>
</nav>
<br>
<br>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div th:if="${param.success}">
<div class="alert alert-info">You've successfully registered to our awesome app!</div>
</div>
<h1>Registration</h1>
<form th:action="@{/registration}" th:object="${user}" method="post">
<p class="error-message" th:if="${#fields.hasGlobalErrors()}" th:each="error : ${#fields.errors('global')}" th:text="${error}">Validation error
</p>
<div class="form-group" th:classappend="${#fields.hasErrors('username')}? 'has-error':''">
<label for="username" class="control-label">Username</label> <input id="username" class="form-control" th:field="*{username}" />
<p class="error-message" th:each="error: ${#fields.errors('username')}" th:text="${error}">Validation error</p>
</div>
<div class="form-group" th:classappend="${#fields.hasErrors('firstName')}? 'has-error':''">
<label for="firstName" class="control-label">First name</label> <input id="firstName" class="form-control" th:field="*{firstName}" />
<p class="error-message" th:each="error: ${#fields.errors('firstName')}" th:text="${error}">Validation error</p>
</div>
<div class="form-group" th:classappend="${#fields.hasErrors('lastName')}? 'has-error':''">
<label for="lastName" class="control-label">Last name</label> <input id="lastName" class="form-control" th:field="*{lastName}" />
<p class="error-message" th:each="error : ${#fields.errors('lastName')}" th:text="${error}">Validation error</p>
</div>
<div class="form-group" th:classappend="${#fields.hasErrors('dateOfBirth')}? 'has-error':''">
<label for="dateOfBirth" class="control-label">Date of birth</label>
<div class="input-group date">
<input type="text" class="form-control" id="dateOfBirth" autocomplete="off" th:field="*{dateOfBirth}"/>
<div class="input-group-append">
<span class="input-group-text"><i class="far fa-calendar-alt"></i></span>
</div>
</div>
<p class="error-message" th:each="error : ${#fields.errors('dateOfBirth')}" th:text="${error}">Validation error</p>
</div>
<div class="form-group" th:classappend="${#fields.hasErrors('email')}? 'has-error':''">
<label for="email" class="control-label">E-mail</label> <input id="email" class="form-control" th:field="*{email}" />
<p class="error-message" th:each="error : ${#fields.errors('email')}" th:text="${error}">Validation error
</p>
</div>
<div class="form-group" th:classappend="${#fields.hasErrors('confirmEmail')}? 'has-error':''">
<label for="confirmEmail" class="control-label">Confirm
e-mail</label> <input id="confirmEmail" class="form-control" th:field="*{confirmEmail}" />
<p class="error-message" th:each="error : ${#fields.errors('confirmEmail')}" th:text="${error}">Validation error</p>
</div>
<div class="form-group" th:classappend="${#fields.hasErrors('password')}? 'has-error':''">
<label for="password" class="control-label">Password</label> <input id="password" class="form-control" type="password" th:field="*{password}" />
<p class="error-message" th:each="error : ${#fields.errors('password')}" th:text="${error}">Validation error</p>
</div>
<div class="form-group" th:classappend="${#fields.hasErrors('confirmPassword')}? 'has-error':''">
<label for="confirmPassword" class="control-label">Confirm
password</label> <input id="confirmPassword" class="form-control" type="password" th:field="*{confirmPassword}" />
<p class="error-message" th:each="error : ${#fields.errors('confirmPassword')}" th:text="${error}">Validation error</p>
</div>
<div class="form-group" th:classappend="${#fields.hasErrors('age')}? 'has-error':''">
<label for="age" class="control-label">Age</label>
<select class="form-control" th:field="*{age}" id="age">
<option th:each="i : ${#numbers.sequence(18, 120)}" th:value="${i}" th:text="${i}">
</option>
</select>
<p class="error-message" th:each="error : ${#fields.errors('age')}" th:text="${error}">Validation error</p>
</div>
<div class="form-group" th:classappend="${#fields.hasErrors('terms')}? 'has-error':''">
<input id="terms" type="checkbox" th:field="*{terms}" /> <label class="control-label" for="terms"> I agree with the <a
href="#">terms and conditions</a> for Registration.
</label>
<p class="error-message" th:each="error : ${#fields.errors('terms')}" th:text="${error}">Validation error
</p>
</div>
<div class="form-group">
<button type="submit" class="btn btn-success">Register</button>
<span>Already registered? <a href="/" th:href="@{/login}">Login here</a></span>
</div>
<div th:if="${param.error}">
<div class="alert alert-danger">Invalid fields.
</div>
</div>
</form>
</div>
</div>
</div>
<script type="text/javascript" th:src="@{/webjars/jquery/3.2.1/jquery.min.js/}"></script>
<script type="text/javascript" th:src="@{/webjars/bootstrap/3.3.7/js/bootstrap.min.js}"></script>
<script type="text/javascript" th:src="@{/webjars/popper.js/umd/popper.min.js}"></script>
<script type="text/javascript" th:src="@{assets/bootstrap-datepicker/js/bootstrap-datepicker.js}"></script>
<script>
$('.input-group.date').datepicker({
autoclose: true,
todayHighlight: true
});
</script>
</body>
</html>
这就是我使用的方式
<!-- birthday -->
<div class="reg-form-grp form-group">
<label class="reg-resp" id="dateResp"></label>
<input type="text" name="dob" id="datepicker" class="form-control input-lg" autocomplete="new-date" placeholder="BirthDay">
</div>// validate birthday on input
$('#datepicker').on('keyup keydown blur', function() {
// get date value
dob = $('#datepicker').val();
// date regex checker
var dobReg = /^(0[1-9]|1[0-2])/(0[1-9]|1d|2d|3[01])/(19|20)d{2}$/;
// validate birthday input length
if (dob.length != 10) {
$('#dateResp').html('<i class="fa fa-times"></i> Birth date format mm/dd/yyyy').show();
// not approved
exeDob = false;
}
// test date regex
else if (!dobReg.test(dob)) {
$('#dateResp').html('<i class="fa fa-times"></i> Birth date format mm/dd/yyyy').show();
// not approved
exeDob = false;
} else {
$('#dateResp').html('').hide();
// approved
exeDob = true;
}
});