使用特定日期填充 jQuery Datepicker

Posted 2023-05-08

【中文标题】使用特定日期填充 jQuery Datepicker

【英文标题】：Populating jQuery Datepicker with specific dates

【发布时间】：2019-11-20 09:48:54

【问题描述】：

我正在尝试为用户创建一个 asp.net mvc 视图，以使用 jQuery UI Datepicker 仅从特定数量的可用日期中进行选择，如下图所示。

到目前为止，我已经使用控制器将 Datepicker 列表传递给视图，其中包括 jQuery 日历应向用户显示的所有日期。问题是，日历由于某种原因保持空白，即数据库中的日期没有显示在日历中。

我的日期选择器模型：

namespace BookingSys.Models

  public class Datepicker
  
    public DateTime Date  get; set; 
    public int Id  get; set; 
    public int LecturerId  get; set; 
    public string Comment  get; set; 
  

数据库上下文：

namespace BookingSys.Models

  public class BookingSysDb : DbContext
  
    public DbSet<Datepicker> Dates  get; set; 
  

我的预订控制器：

[HttpGet]
    public ActionResult Booking()
    
        var model = db.Dates.ToList();
        return View(model);
    

我的学校/预订视图：

@model List<BookingSys.Models.Datepicker>

@
ViewBag.Title = "Booking";


<h2>School Bookings</h2>

<form asp-controller="School" asp-action="Booking" method="post">
<input asp-for="School.Date" id="txtDate" /><br />
<button>Submit</button>
</form>

<link href="~/Content/themes/base/jquery-ui.min.css" rel="stylesheet" />

@section scripts 

<script src="~/Scripts/jquery-ui-1.12.1.min.js"></script>
<script>
            jQuery(function () 
                var enableDays = [' @(string.Join("','", Model.Select(d => 
               d.Date.ToString("dd-MM-yyyy")))) ']; // **** I think this line of code may be causing the problem

                function enableAllTheseDays(date) 
                    var sdate = $.datepicker.formatDate('dd-mm-yy', date)
                    console.log(sdate)
                    if ($.inArray(sdate, enableDays) != -1) 
                        return [true];
                    
                    return [false];
                

                $("#txtDate").datepicker(
                    dateFormat: "dd/MM/yy",
                    beforeShowDay: enableAllTheseDays

                );
            );
  </script>

  @Scripts.Render("~/bundles/jqueryval")


<style>
.my-class a 
    background-color: #07ea69 !important;
    background-image: none !important;
    color: #ffffff !important;

</style>

谁能告诉我为什么我的日历没有显示 Datepicker 数据库上下文中的日期？尽管 Datepicker 数据库包含 2019 年 7 月的 10 个日期，但它们并未显示在视图的日历中。

干杯

【问题讨论】：

考虑在创建后添加console.log(enableDays); 并检查输出。确保您在 html/javascript 中获得了您期望的数据。

我也将返回return [true, "", ""]; 或return [false, "", ""];，如 API 中所述：api.jqueryui.com/datepicker/#option-beforeShowDay 索引 0 和 1 是必需的，2 是可选的。

@Twisty 感谢您的回复队友！我添加了 console.log 并返回了以下内容： Array(1) 0: " 10-10-1990','07-01-2019','07-31-2019 39;,'07-15-2019" 长度：1。你能看出为什么这行代码给出了这个输出吗？我的 JavaScript 知识不是最好的

【参考方案1】：

在此处尝试解决方案。

https://forum.jquery.com/topic/default-date-for-date-picker

看来您需要使用 setDate 命令。这可能会满足您的需求。

【讨论】：

感谢您的回复。虽然我认为你误解了我的问题。我从日历 UI 将日期输入字段没有问题，我遇到的问题是即使 Datepicker 数据库在 2019 年 7 月保存了 10 个日期，它们也没有显示在视图的日历中。

【参考方案2】：

显然，它正在对其进行编码以防止代码注入，以防御 XSS。由于已知这只是 DateTime 值，因此可以使用 @Html.Raw 覆盖它

var enableDays = ['@Html.Raw(string.Join("','", Model.Select(d => 
d.DtmDate.ToString("MM-dd-yyyy")))'];

【参考方案3】：

好的，试试这个解决方案：

https://forum.jquery.com/topic/jquery-datepicker-pick-multiple-dates

基于此，您要么需要第 3 方插件，要么必须“自行开发”。