在jQuery UI datepicker中标记所选日期 [英] Mark selected days in jQuery UI datepicker

问题描述

我使用jQuery UI的datepicker（http://docs.jquery.com/UI/Datepicker）。

这听起来应该可以标记某些日期通过提供 beforeShowDay 函数（http://docs.jquery.com/UI/Datepicker#event-beforeShowDay）。但我不能得到的CSS正确的。

这是我到目前为止的JavaScript：

  $（function（）{
 $（'。date'）。datepicker（{
 dateFormat：'yy-mm-dd'，
 firstDay：'1'，
 showOtherMonths：'true'，
 beforeShowDay：daysToMark 
}）; 
}）; 
 
 function daysToMark（date）{
 if（date.getDate（）< 15）{
 return [true，'markedDay'，]; 
} 
 
 return [true，''，]; 
} 
  

这是css：

  .markedDay {
 background-color：green; 
} 
  

但没有任何变化。

解决方案

这样做

  .markedDay a.ui-state-default {
 background：green！important; 
} 
 
 .markedDay a.ui-state-hover {
 background：red！important; 
} 
  

要将样式添加到a元素而不是td元素尼克克拉弗指出。我还必须将jQuery UI生成的类名添加到a元素，使我的css规则比默认的规则更重要，根据 CSS级联规则。最后一个窍门是使用 background 而不是 background-color 来覆盖所使用的jQuery UI主题图像。 / p>

I'm using jQuery UI's datepicker (http://docs.jquery.com/UI/Datepicker).

It sounds like it should be possible to mark certain days by providing a beforeShowDay function (http://docs.jquery.com/UI/Datepicker#event-beforeShowDay). But I can't get the CSS right for this. I'd like to make the background green for some days.

This is the JavaScript I have this far:

$(function() {    
    $('.date').datepicker({
        dateFormat: 'yy-mm-dd',
        firstDay: '1',
        showOtherMonths: 'true',
        beforeShowDay: daysToMark
    });
});

function daysToMark(date) {
    if (date.getDate() < 15) {
        return [true, 'markedDay', ""];
    }

    return [true, '', ""];
}

And this is the css:

.markedDay {
    background-color: green;
}

But nothing changes. What am I doing wrong?

解决方案

This did it

.markedDay a.ui-state-default {
    background: green !important;
}

.markedDay a.ui-state-hover {
    background: red !important;
}

Had to add the styling to the a element and not the td element, as pointed out by Nick Craver. I also had to add the jQuery UI generated class name to the a element to make my css rule more important than the default one according the CSS cascading rules. The final trick was to use background instead of background-color to override the jQuery UI theme image that was used.

这篇关于在jQuery UI datepicker中标记所选日期的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！