highlighting specific days in jQuery datepicker

Question

I have looked through various posts to try and solve my problem such as: How to highlight some specific days with multiple colors in JQuery Datepick

Although none work for my own specific needs. I am passing a number of dates (enableDays) into Datepicker, the dates that I pass in are the only dates available for the user to select. I need to highlight this specific set of dates in green

in the above picture, only the dates 28/30/31 are available for the user to select; I need these 3 dates highlighted in green.

my datepicker code so far:

<script src="~/Scripts/jquery-ui-1.12.1.min.js"></script>
<script>
            jQuery(function () {

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

                console.log(enableDays);

                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>

The enableDays is an array of dates to be shown to the user in the Datepicker. E.g. in this case the array would be ['28-08-2019', '30-08-2019', '31-08-2019']

can anyone tell me how I can highlight only the 'enableDays' in green?

Cheers

Answer 1

The resulting array must have 2 elements, and can have a optional 3rd:

A function that takes a date as a parameter and must return an array with:

[0]: true/false indicating whether or not this date is selectable

[1]: a CSS class name to add to the date's cell or "" for the default presentation

[2]: an optional popup tooltip for this date

Your results only contain 1 element. Consider the following example:

$(function() {

  var enableDays = ['28-08-2019', '30-08-2019', '31-08-2019'];

  console.log(enableDays);

  function enableAllTheseDays(date) {
    var fDate = $.datepicker.formatDate('dd-mm-yy', date);
    var result = [false, ""];
    $.each(enableDays, function(k, d) {
      if (fDate === d) {
        result = [true, "highlight-green"];
      }
    });
    return result;
  }

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

});

.highlight-green {
  /* Cell */
  background-color: green;
}

.highlight-green a.ui-state-default {
  /* Link */
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<p>Date: <input type="text" id="txtDate"></p>

You can use CSS to manipulate the style.