如何使用输入数据库的日期禁用 Datepicker 中的日期？（MVC4 asp.net）

Question

我正在尝试在 MVC4 中进行预约页面。它运作良好，但我想禁用之前选择的日期。所以规则是每天只有一次约会。这是我的负责人进行预约：

 public ActionResult Make()
           {
               return View();
           }
           [HttpPost]
           [ValidateAntiForgeryToken]
           public ActionResult Make(Models.AppModel User)
           {
               if (Session["UserEmail"] != null)
               {
                   using (var db = new MaindbModelDataContext())
                   {
                       var patient = db.Patients.FirstOrDefault(u => u.Email == (String)Session["UserEmail"]);

                       var app = new Appointment();

                       app.Date = (DateTime)User.Date;
                       app.Description = User.Description;
                       app.Status = "isPending";
                       app.PatientNo = patient.PatientNo;
                       app.AppNo = Guid.NewGuid().GetHashCode();
                       db.Appointments.InsertOnSubmit(app);
                       db.SubmitChanges();

                   }
               }
               else
               {
                   return RedirectToAction("Index", "User");
               }
               return RedirectToAction("Index", "Patient");
           }
           //
       }
    }

这是我对日期选择器的看法

@model DentAppSys.Models.AppModel
@{
    ViewBag.Title = "Appointment";
}
<link type="text/css" rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken();
    @Html.ValidationSummary(true, "");
    <div>

        <fieldset>
            <legend>Get an Appointment</legend>


            <div>@Html.LabelFor(u => u.Date)</div>
            <div>
                @Html.TextBoxFor(u => u.Date, htmlAttributes: new { id = "DatePicker" })
                @Html.ValidationMessageFor(u => u.Date)

            </div>

            <div>@Html.LabelFor(u => u.Description)</div>
            <div>
                @Html.TextBoxFor(u => u.Description)

            </div>

            <input type="submit" value="Submit" class="footer_btn" />

        </fieldset>

    </div>
}
<script type="text/javascript">
    $(function () {
        $("#DatePicker").datepicker();
    });

</script>

Answer 1

不清楚哪些日期将被禁用。无论哪种方式，我都建议通过 jQuery 发出 Ajax GET 请求并提取这些日期（EF 查询以获取这些日期）并将它们存储在 javascript 数组中。然后，您可以将此数组用作日期选择器的“beforeShowDay”参数，如this StackOverFlow Question 中所回答的那样。

在 cmets 之后编辑：

将以下操作添加到您的控制器：

 public JsonResult GetReservedDates()
        {
            var db = new MaindbModelDataContext();
            var dates = db.Appointment.ToList().Select(x => x.Date);

            return Json(new { dates }, "text/x-json", JsonRequestBehavior.AllowGet);
        }

然后，在您的页面上对其进行 ajax 调用：

$.get("/ControllerName/GetReservedDates",function(data){
var reserveddates = data.dates;
$('#DatePicker').datepicker({
    beforeShowDay: function(date){
        var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
        return [ reserveddates.indexOf(string) == -1 ]
    }
});

});

您可能必须将日期从 c# 格式化为 javascript。这取决于您拥有的数据类型。

希望这会有所帮助。