在 jQuery 日期选择器中突出显示特定日期

Question

我浏览了各种帖子来尝试解决我的问题，例如： How to highlight some specific days with multiple colors in JQuery Datepick

尽管 none 可以满足我自己的特定需求。我将一些日期 (enableDays) 传递到 Datepicker，我传递的日期是用户可用于 select 的唯一日期。我需要用绿色突出显示这组特定日期

在上图中，只有日期28/30/31可供用户选择select；我需要这 3 个日期以绿色突出显示。

到目前为止我的日期选择器代码：

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

enableDays 是要在日期选择器中向用户显示的日期数组。例如。在这种情况下，数组将是 ['28-08-2019', '30-08-2019', '31-08-2019']

谁能告诉我如何只突出显示绿色的 'enableDays'？

干杯

Answer 1

生成的数组必须有 2 个元素，并且可以有一个可选的第 3 个：

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

您的结果仅包含 1 个元素。考虑以下示例：

$(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>

您可以使用 CSS 来操纵样式。

在 jQuery 日期选择器中突出显示特定日期

highlighting specific days in jQuery datepicker

javascript

c#

jquery

jquery-ui