如何在datetime-local日期选择器中禁用数据库内的已预订日期？

核心思路 #

要实现这个需求，需要后端获取已预订时间列表，再通过前端拦截或组件禁用阻止用户选择，同时必须加上后端二次验证防止前端被绕过。

步骤1：后端获取已预订时间并传递给视图 #

在ASP.NET Controller中，从BookedDate表查询所有已预订的时间，转换成datetime-local控件要求的yyyy-MM-ddTHH:mm格式，再传递给视图（推荐用ViewModel，以下用ViewBag做示例）。

示例代码（Controller）：

public IActionResult BookingPage()
{
    // 从数据库查询已预订时间，转换为datetime-local兼容格式
    var bookedTimeList = _dbContext.BookedDate
        .Where(b => b.BkdDate.HasValue) // 过滤空值
        .Select(b => b.BkdDate.Value.ToString("yyyy-MM-ddTHH:mm"))
        .ToList();

    ViewBag.BookedTimes = bookedTimeList;
    return View();
}

步骤2：前端处理方案 #

方案A：原生控件+JS验证（无需额外组件） #

原生datetime-local控件不支持直接禁用特定时间点，需监听用户选择事件，判断所选时间是否在已预订列表中，若已预订则提示并清空选择。

在视图的脚本部分添加：

<script>
    // 从后端获取已预订时间数组
    const bookedTimes = @Html.Raw(Json.Serialize(ViewBag.BookedTimes));
    const dateInput = document.querySelector('input[type="datetime-local"]');

    // 监听选择变化事件
    dateInput.addEventListener('change', function(e) {
        const selectedTime = e.target.value;
        if (bookedTimes.includes(selectedTime)) {
            alert('该时间段已被预订，请选择其他时间');
            e.target.value = ''; // 清空选择，也可恢复默认值
        }
    });
</script>

方案B：第三方日期选择器（更友好的体验） #

如果想要用户根本无法选择已预订时间，推荐使用轻量无依赖的Flatpickr组件，它支持直接配置禁用的时间点。

1. 将Flatpickr的CSS和JS文件引入项目（可通过NuGet安装或下载本地文件）
2. 在视图中初始化控件：

<!-- 引入Flatpickr样式和脚本（路径根据项目调整） -->
<link rel="stylesheet" href="~/assets/flatpickr.min.css">
<script src="~/assets/flatpickr.min.js"></script>

<script>
    const bookedTimes = @Html.Raw(Json.Serialize(ViewBag.BookedTimes));
    flatpickr('input[type="datetime-local"]', {
        minDate: '@DateTime.Now.AddDays(+1).Date.ToString("yyyy-MM-ddTHH:mm")',
        maxDate: '2025-12-30T16:30',
        defaultDate: '@DateTime.Now.AddDays(+2).Date.ToString("yyyy-MM-ddTHH:mm")',
        enableTime: true,
        time_24hr: true,
        disable: bookedTimes, // 直接禁用已预订的时间点
        dateFormat: "Y-m-dTH:i" // 匹配datetime-local的格式
    });
</script>

步骤3：后端二次验证（必须做） #

前端验证可被绕过，所以在提交表单的Action中必须再次检查所选时间是否已被预订：

[HttpPost]
public IActionResult SubmitBooking(YourBookingModel model)
{
    if (!ModelState.IsValid)
    {
        // 重新传递已预订列表，返回视图
        ViewBag.BookedTimes = _dbContext.BookedDate
            .Where(b => b.BkdDate.HasValue)
            .Select(b => b.BkdDate.Value.ToString("yyyy-MM-ddTHH:mm"))
            .ToList();
        return View(model);
    }

    // 检查所选时间是否已被预订
    bool isAlreadyBooked = _dbContext.BookedDate
        .Any(b => b.BkdDate.HasValue 
            && b.BkdDate.Value.ToString("yyyy-MM-ddTHH:mm") == model.BookStartDate.ToString("yyyy-MM-ddTHH:mm"));

    if (isAlreadyBooked)
    {
        ModelState.AddModelError("BookStartDate", "该时间段已被预订，请重新选择");
        ViewBag.BookedTimes = _dbContext.BookedDate
            .Where(b => b.BkdDate.HasValue)
            .Select(b => b.BkdDate.Value.ToString("yyyy-MM-ddTHH:mm"))
            .ToList();
        return View(model);
    }

    // 保存新的预订记录
    var newBooking = new BookedDate
    {
        BkdDate = model.BookStartDate,
        BkdBy = "当前用户标识" // 替换为实际的用户ID或用户名
    };
    _dbContext.BookedDate.Add(newBooking);
    _dbContext.SaveChanges();

    return RedirectToAction("BookingSuccess");
}

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