我在我的 ASP.Net 应用程序（VS 2017，.Net 框架 4.7）中使用 Tempus Dominus Bootstrap 4，版本 5.0.1 以及 Bootstrap 版本 4.5.0。
在我的付款页面中，在 aspx 部分中初始化 DateTimePicker 时，我正在设置 minDate 和 maxDate 选项。我还将格式设置为'DD/MM/YYYY hh:mm A'。在运行页面时，当我弹出 DateTimePicker 的日历控件并尝试使用鼠标选择 minDate 和 maxDate 范围之外的任何日期时，该控件正确地禁用了选择并阻止我选择任何无效的日期。但是，如果我使用键盘写入超出范围的任何无效日期，则控件不会对其进行验证，因此允许将无效日期传递给服务器端。我该如何阻止它这样做？
我正在使用moment.js和FontAwesome的更新版本。我也尝试过分别使用Tempus Dominus、moment和FontAwesome的最小和完整版本，但它显示的日期超出了 minDate 和 maxDate 的范围。我错过了什么还是一个固有的问题？
我的代码如下。
母版页aspx：
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="User.master.cs" Inherits="User" %>
<!DOCTYPE html>
<html>
<head runat="server">
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<!-- JQuery references -->
<script src="http://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<!-- Bootstrap CSS references -->
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<link href="FontAwesome/css/all.css" rel="stylesheet" />
<link href="FontAwesome/css/v4-shims.css" rel="stylesheet" />
<link href="Content/tempusdominus-bootstrap-4.css" rel="stylesheet" />
<link href="Content/CustomStyleSheet.css" rel="stylesheet" />
<!--***** JQuery code *****-->
<!-- After the DOM is ready to execute Javascript, add a click event to the Cart button. When the button is clicked, the user will be taken to the Cart.aspx page. -->
<script>
$(document).ready(function DocumentReady() {
$("#btnCart").click(function btnCart_Click() {
window.location.href = "/Cart.aspx";
});
});
</script>
<!--***** End *****-->
<title>Responsive Website</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<!--***** Navigation Bar, Logo, Dropdown Menu *****-->
<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="Default.aspx">
<img src="Images/web.png" width="30" height="30" class="d-inline-block align-top" alt="Logo" /> Repsonsive Website
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav float-right">
<li class="nav-item active">
<a class="nav-link" href="Default.aspx">Home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Products
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="Products.aspx">All Products</a>
<div class="dropdown-divider" role="separator"></div>
<label class="dropdown-header">Men's</label>
<a class="dropdown-item" href="#">Shirts</a>
<a class="dropdown-item" href="#">Pants</a>
<a class="dropdown-item" href="#">Denims</a>
<div class="dropdown-divider" role="separator"></div>
<label class="dropdown-header">Women's</label>
<a class="dropdown-item" href="#">Tops</a>
<a class="dropdown-item" href="#">Leggings</a>
<a class="dropdown-item" href="#">Denims</a>
</div>
</li>
<li class="nav-item">
<button id="btnCart" type="button" class="btn btn-primary navbar-btn">
Cart <span id="CartBadge" class="badge badge-light" runat="server"></span>
</button>
</li>
<li class="nav-item">
<asp:Button ID="btnSignIn" runat="server" class="btn btn-light navbar-btn" Text="Sign In" OnClick="btnSignIn_Click" CausesValidation="False" />
<asp:Button ID="btnSignOut" runat="server" class="btn btn-light navbar-btn" Text="Sign Out" Visible="false" OnClick="btnSignOut_Click" CausesValidation="False" />
</li>
<li class="nav-item">
<asp:Button ID="btnSignUp" runat="server" class="btn btn-light navbar-btn" Text="Sign Up" OnClick="btnSignUp_Click" CausesValidation="False" />
</li>
</ul>
</div>
</nav>
<!--***** End *****-->
<div class="container midcontent">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
<!--***** Footer *****-->
<hr />
<!-- Used to provide a separator between middle contents and footer. -->
<footer>
<div class="container">
<div id="BackToTop" runat="server" class="float-right" visible="false"><a href="#">Back to top</a></div>
<p>© 2020 domainname.com · <a href="Default.aspx">Home</a> · <a href="#">About</a> · <a href="#">Contact</a> · <a href="#">Products</a></p>
</div>
</footer>
<!--***** End *****-->
</form>
<!-- Optional JavaScript -->
<!-- References: jQuery first, then Popper.js, then Bootstrap JS -->
<script src="Scripts/jquery-3.0.0.min.js"></script>
<script src="Scripts/umd/popper.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/moment.js"></script>
<script src="Scripts/tempusdominus-bootstrap-4.js"></script>
</body>
</html>支付页面aspx：
<%@ Page Title="" Language="C#" MasterPageFile="~/User.master" AutoEventWireup="true" CodeFile="Payment.aspx.cs" Inherits="Payment" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<script type="text/javascript">
// Initialise DateTimePicker.
$(function() {
$('#DateTimePicker1').datetimepicker({
minDate: "01/01/1753 12:00 AM",
maxDate: "12/31/9999 11:59 PM",
format: 'DD/MM/YYYY hh:mm A'
});
});
// Test if txtPin is not blank, doesn't contain alphanumeric value and contains exactly six digits.
function Client_ValidatePin(source, arguments) {
arguments.IsValid = /^[0-9]{6}$/.test(arguments.Value);
}
</script>
<div id="divAlert" role="alert" runat="server">
</div>
<div class="row">
<div class="col-md-9">
<h4>Payment</h4>
<hr />
<div class="form-group row">
<asp:Label ID="Label1" runat="server" class="col-md-2 col-form-label" Text="Name:"></asp:Label>
<div class="col-md-7">
<asp:TextBox ID="txtName" class="form-control" runat="server" MaxLength="50"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" class="text-danger" ErrorMessage="Name is required!" ControlToValidate="txtName"></asp:RequiredFieldValidator>
</div>
</div>
<div class="form-group row">
<asp:Label ID="Label2" runat="server" class="col-md-2 col-form-label" Text="PIN:"></asp:Label>
<div class="col-md-7">
<asp:TextBox ID="txtPin" class="form-control" runat="server" MaxLength="6"></asp:TextBox>
<asp:CustomValidator ID="PinValidator" runat="server" ControlToValidate="txtPin" ValidateEmptyText="true" ClientValidationFunction="Client_ValidatePin" OnServerValidate="PinValidator_ServerValidate" class="text-danger" Display="Static" ErrorMessage="A 6-digit number is required!"></asp:CustomValidator>
</div>
</div>
<div class="form-group row">
<asp:Label ID="Label3" runat="server" class="col-md-2 col-form-label" Text="Date/Time:"></asp:Label>
<div class="col-md-7">
<div class="input-group date" id="DateTimePicker1" data-target-input="nearest">
<input type="text" name="DateTimeInput" class="form-control datetimepicker-input" data-target="#DateTimePicker1" />
<div class="input-group-append" data-target="#DateTimePicker1" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>
</div>
</div>
<asp:Button ID="btnPay" runat="server" Text="Make Payment" OnClick="btnPay_Click" />
</div>
</div>
</asp:Content>