在Razor Pages日历中禁用指定日期及所有过去日期

你已经通过min属性实现了过去日期的禁用，但原生input[type="date"]不支持直接禁用多个指定日期，需要结合后端数据和前端JS插件来实现。以下是完整方案：

步骤1：后端获取禁用日期列表 #

在你的PageModel中，从数据库查询所有需要禁用的日期，格式化为yyyy-MM-dd的字符串列表，传递给前端：

using Microsoft.EntityFrameworkCore;
using System.Text.Json;

public class YourPageModel : PageModel
{
    private readonly YourDbContext _context;

    public YourPageModel(YourDbContext context)
    {
        _context = context;
    }

    [BindProperty]
    public ManageBookingViewModel ManageBooking { get; set; }
    public List<string> DisabledDates { get; set; }

    public async Task OnGetAsync()
    {
        // 从数据库查询已被预订/需要禁用的日期，替换成你的实际表和字段
        DisabledDates = await _context.BookedDates
            .Select(d => d.BookedDate.ToString("yyyy-MM-dd"))
            .ToListAsync();
    }

    // 提交时的验证逻辑
    public async Task<IActionResult> OnPostAsync()
    {
        if (!ModelState.IsValid) return Page();

        // 验证是否为过去日期
        if (ManageBooking.BookingDate.Date < DateTime.Today)
        {
            ModelState.AddModelError("ManageBooking.BookingDate", "不能选择过去的日期");
            return Page();
        }

        // 验证日期是否已被禁用
        var isDateDisabled = await _context.BookedDates
            .AnyAsync(d => d.BookedDate.Date == ManageBooking.BookingDate.Date);
        
        if (isDateDisabled)
        {
            ModelState.AddModelError("ManageBooking.BookingDate", "该日期已被占用，请选择其他日期");
            return Page();
        }

        // 保存预订逻辑
        _context.ManageBookings.Add(ManageBooking);
        await _context.SaveChangesAsync();

        return RedirectToPage("./Success");
    }
}

步骤2：前端使用日期选择器插件实现禁用 #

原生日期输入框无法实现多日期禁用，这里以jQuery UI Datepicker为例（你也可以用Bootstrap Datepicker等类似插件）：

1. 先引入jQuery和jQuery UI的资源（如果项目中还没有）：

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>

2. 渲染输入框并初始化日期选择器：

<!-- 替换原来的input，添加datepicker类 -->
<input asp-for="ManageBooking.BookingDate" class="form-control datepicker" />

<script>
    // 将后端传递的禁用日期列表转为JS数组
    const disabledDates = @Json.Serialize(Model.DisabledDates);

    $(function() {
        $(".datepicker").datepicker({
            minDate: 0, // 0代表今天，自动禁用过去日期
            dateFormat: "yy-mm-dd", // 和后端日期格式保持一致
            beforeShowDay: function(date) {
                // 将当前日期转为yyyy-MM-dd格式
                const formattedDate = $.datepicker.formatDate("yy-mm-dd", date);
                // 判断是否在禁用列表中，返回[是否可用]
                return [!disabledDates.includes(formattedDate)];
            }
        });
    });
</script>

关键注意事项 #

• 双重验证：前端禁用只是提升用户体验，必须在后端再次验证提交的日期，防止用户通过修改HTML或API请求绕过前端限制。
• 日期格式统一：前后端的日期格式必须保持一致（这里用yyyy-MM-dd），避免匹配错误。
• 插件选择：如果项目已经使用其他UI框架（如Bootstrap），可以选择对应生态的日期选择器插件，逻辑类似。

内容的提问来源于stack exchange，提问作者Teena