Populating jQuery Datepicker with specific dates

Question

I am trying to make an asp.net mvc view for a user to use the jQuery UI Datepicker to select only from a specific number of available dates like the picture below.

So far I have used the controller to pass in a List of Datepicker to the view, which includes all of the dates that the jQuery Calendar should show to the user. The problem is, the calendar remains blank for some reason i.e. the dates from the database are not showing up in the calendar.

My Datepicker Model:

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>

Can anyone tell me why my calendar is not showing the dates from the Datepicker database conext? Even though the Datepicker database holds 10 dates in the month of July 2019, they are not showing up in the calendar the view.

Cheers

Answer 1

Try the solution here.

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

It looks like you need to use the setDate command. That may do what you need.

Answer 2

So apparently, it's encoding it to prevent code injection as a defense against XSS. Since this is known to be just DateTime values, It can be overridden using @Html.Raw

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

Answer 3

Ok, try this solution:

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

Based on that, you will either need a 3rd party plug-in, or you'll have to "roll your own".