Заполнение jQuery Datepicker с определенными датами

Question

Я пытаюсь создать представление mvc asp.net, чтобы пользователь мог использовать DatePicker пользовательского интерфейса jQuery для выбора только из определенного числа доступных дат, как показано на рисунке ниже.

До сих пор я использовал контроллер для передачи списка Datepicker в представление, которое включает все даты, которые jQuery Calendar должен показывать пользователю.Проблема в том, что календарь по какой-то причине остается пустым, т. Е. Даты из базы данных не отображаются в календаре.

Моя модель выбора даты:

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; }
  }
}

DbContext:

namespace BookingSys.Models
{
  public class BookingSysDb : DbContext
  {
    public DbSet<Datepicker> Dates { get; set; }
  }
}

My Booking Controller:

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

My Schoool / Booking View:

@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 содержит 10 дат в июле 2019 года, они не отображаются в представлении календаря.

Cheers

Answer 1

Так что, очевидно, это кодирует его, чтобы предотвратить внедрение кода в качестве защиты от XSS.Поскольку известно, что это просто значения DateTime, его можно переопределить с помощью @ Html.Raw

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

Answer 2

Хорошо, попробуйте это решение:

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

Исходя из этого, вам потребуется либо сторонний плагин, либо вам придется «свернуть свой».

Answer 3

Попробуйте решение здесь.

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

Похоже, вам нужно использовать команду setDate. Это может делать то, что вам нужно.