改变颜色以红色的日期选择器

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/