突出显示 jQuery datepicker 中的特定日期答案

【问题标题】：highlighting specific days in jQuery datepicker突出显示 jQuery datepicker 中的特定日期
【发布时间】：2019-12-26 04:07:36
【问题描述】：

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

虽然没有一个适合我自己的特定需求。我将一些日期（enableDays）传递给 Datepicker，我传递的日期是用户可以选择的唯一日期。我需要用绿色突出显示这组特定日期

上图中，只有28/30/31的日期可供用户选择；我需要这 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 是要在 Datepicker 中向用户显示的日期数组。例如。在这种情况下，数组将是 ['28-08-2019', '30-08-2019', '31-08-2019']

谁能告诉我如何只用绿色突出显示“enableDays”？

干杯

【问题讨论】：

请提供数组中的数据示例。
@Twisty 该数组是要在 Datepicker 中显示给用户的日期数组。例如。在这种情况下，数组将是 ['28-08-2019', '30-08-2019', '31-08-2019']。我需要这些日期以绿色显示给用户

标签： javascript c# jquery jquery-ui

【解决方案1】：

结果数组必须有 2 个元素，并且可以有一个可选的第三个：

一个以日期为参数的函数，必须返回一个数组：

[0]: true/false 表示这个日期是否可选

[1]：添加到日期单元格的 CSS 类名或默认显示的 ""

[2]：此日期的可选弹出工具提示

您的结果仅包含 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 来操作样式。

希望这会有所帮助。

【讨论】：