在 Razor 页面中禁用特定日期和所有过去的日期答案

【问题标题】：Disable Specific Date and all the past dates in Razor pages在 Razor 页面中禁用特定日期和所有过去的日期
【发布时间】：2023-01-16 11:17:55
【问题描述】：

我想在 Razor 页面日历中禁用特定日期和所有过去的日期。我有数据库表来存储特定日期，我想从那里获取并禁用剃须刀页面日历中的日期。

<input asp-for="ManageBooking.BookingDate" class="form-control" min="@DateTime.Now.ToString("yyyy-MM-dd")" />

这就是我将要禁用所有过去日期的方法，但我想禁用将从数据库中读取的某些日期。

任何帮助，将不胜感激，

谢谢，蒂娜·约翰

【问题讨论】：

标签： asp.net-core razor calendar

【解决方案1】：

您是否考虑过使用Bootstrap 3 Datepicker？会很方便。

首先安装对应的Nuget包：

Install-Package Bootstrap.v3.Datetimepicker
Install-Package Bootstrap.v3.Datetimepicker.CSS

然后，引用对应的js文件和css文件：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>

最后，您可以通过 disabledDates 属性和 minDate 属性禁用指定日期和过去的日期：

<div class="container">
    <div class="row">
        <div class='col-sm-6'>
            <div class="form-group">
                <div class='input-group date' id='datetimepicker5'>
                    <input type='text' class="form-control" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script type="text/javascript">
            $(function () {
                $('#datetimepicker5').datetimepicker({
                    disabledDates: [
                        "01/17/2023",
                        "01/18/2023",
                        "01/19/2023"
                    ],
                    minDate: "01/16/2023"
                });
            });
        </script>
    </div>
</div>

测试结果：

更多详情可以参考this link。

【讨论】：