jQuery日期选择器显示半天被阻止

Question

我正在使用jQuery datepicker来显示公寓的一些阻止日期。我只是把所有被阻止的日期带到数组中，并为这样的所有日期提供样式。

              for (i = 0; i < activeDays.length; i++) 
              {
                   if($.inArray(y + '-' + (m+1) + '-' + d,activeDays) != -1) {
                    return [true, 'css-class-to-highlight', ''];
              }

CSS

<style>
  .css-class-to-highlight a{
   background-color : Red !important;
   background-image :none !important;
   color: White !important;
   font-weight:bold !important;
   }
</style>

这是结果

我的要求是我需要将阻止日期的第一个日期和最后日期显示为可用的一半。这意味着红色的一半日期。我怎么能用css或javascript做到这一点？有任何想法吗？

Answer 1

您可以将css的背景：线性渐变属性应用于div，如下所示：

.css-class-to-highlight a{
   background : linear-gradient(red 50%, green 50%);
   background-image :none !important;
   color: White !important;
   font-weight:bold !important;
}

您甚至可以通过计算更多颜色和百分比来制作漂亮的渐变色。 link

JsFiddle Demo