在datepicker中将ui-state-highlight的颜色更改为红色

Question

这是我的代码

var dates = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(ViewData["ph"]));
    $('#StartDate').datepicker({
        format: 'dd-M-yyyy',
        autoclose: true,
        beforeShowDay: function (date) {
            for (var i = 0; i < dates.length; i++) {
                if (new Date(dates[i]).toString() == date.toString()) {
                    return [true, 'ui-state-highlight'];
                }
            }
            return [true];
        }
    });

我的日期是18日用黄色标出。 我怎么能把它变成红色固体？

Answer 1

您可以通过CSS执行此操作：

.ui-state-highlight {
  border-color: red;
}

一个例子：

var dtNow = new Date();

function addDays(d) {
  return d * 86400000;
}

function showMyDate(d) {
  return d.getDate() + (d.getMonth() + 1) + d.getFullYear();
}

var dates = [
  new Date(dtNow.getTime() + addDays(5)),
  new Date(dtNow.getTime() + addDays(10)),
  new Date(dtNow.getTime() + addDays(12)),
];

$(function() {
  $("#datepicker").datepicker({
    format: 'dd-M-yyyy',
    autoclose: true,
    beforeShowDay: function(date) {
      var status = [];
      $.each(dates, function(key, myDate) {
        if (showMyDate(myDate) === showMyDate(date)) {
          status = [true, 'ui-state-highlight highlight-red', ''];
        } else {
          status = [true, '', ''];
        }
      });
      return status;
    }
  });
});

在此示例中，我添加了两个类：ui-state-highlight和highlight-red。这样我就可以直接改变那些需要变红的东西。

<强> CSS

td.ui-state-highlight.highlight-red {
  border-color: red;
}

工作示例：https://jsfiddle.net/Twisty/6fapkykr/