在jquery datepicker中设置可用日期为绿色?

问题描述:

我尝试在日期选择器绿色中提供可用日期。 Sofar我设法将颜色更改为绿色的所有日期。虽然可用的日期是较暗的绿色,但我宁愿将不可用的设置为灰色。我怎么能做到这一点?以下是我的代码。在jquery datepicker中设置可用日期为绿色?

JS:

$(function() { 
     var availableDates = ["9-5-2017","14-5-2017","15-5-2017"]; 

     function available(date) { 
      dmy = date.getDate() + "-" + (date.getMonth()+1) + "-" + date.getFullYear(); 
      if ($.inArray(dmy, availableDates) != -1) { 
       return [true, "","Available"]; 
      } else { 
       return [false,"","unAvailable"]; 
      } 
     } 

     $("#datepicker").datepicker({ 
      firstDay: 1, 
      dayNamesMin: ['Sö', 'Må', 'Ti', 'On', 'To', 'Fr', 'Lö'], 
      beforeShowDay: available 
     }); 
    }); 

CSS:

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { 
    color: green; 
    background: lightgreen; 
} 

编辑:在功能上可部分解决方案(它只会改变边框):

return [true, "availableStyle","Available"]; 
// CSS 
.availableStyle { 
    background: green !important; 
} 

添加这个CSS规则:

.ui-state-disabled .ui-state-default { 
    color: black; 
    background: white; 
} 

小提琴:https://jsfiddle.net/jds6Lb3x/