改變顏色以紅色的日期選擇器

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/