2010-05-25 140 views
5

我有一个jQuery日期选择器,我需要能够更改所选单元格日期的背景颜色。我想要的东西,如:如何更改jQuery日期选择器的单元格颜色

$("#fecha").datepicker({ 
      onSelect: function(value, date) { 
      alert(date.css()); 
      } 
    }); 

希望的日期参数指的是选定单元格,但它似乎并没有工作。

有什么建议吗?

//编辑: 该解决方案应该让我有不同的颜色动态设置不同的颜色,这就是为什么我想用onSelect而不是直接更改CSS。

其目的是制作一个由用户建立事件的日历。

在此先感谢。在你的CSS

+0

如果给定答案的作品,请把它标记为“答案”,以帮助其他人。这避免了被问到的重复问题。 – 2010-05-26 09:06:35

+0

我知道,但我表达得很糟糕,所以我编辑了这个问题,并且在标记正确的答案之前我正在等待答案。无论如何感谢您的答案! :D – MazarD 2010-05-26 09:30:05

+0

可悲的是我不认为这是可能的。您可以访问onSelect回调,但是DatePicker的内容也会重绘,我不知道是否可以停止。但是,如果你可以停止日期选择器重绘,我已经给出了新的答案。 – 2010-05-26 11:15:43

回答

9

我认为最好的方法(假设我理解正确的你)是简单地覆盖CSS。
在您的网站样式表或HTML头部分,你只需要覆盖以下CSS选择

.ui-datepicker-current-day .ui-state-active { background: #000000; } 

编辑

考虑到你的编辑,下面应该工作(假定你可以得到的日期选择器停止刷新)

onSelect: function(value, date) { 
    date.dpDiv.find('.ui-datepicker-current-day a') 
     .css('background-color', '#000000'); 
} 
+0

但如果我这样做覆盖CSS它不会让我有多个不同颜色的单元格,对不对? – MazarD 2010-05-26 09:12:17

+0

标记你的答案是正确的,因为它是最好的近似值,无论如何,我没有让事情停止刷新,所以我决定写我自己的活动日历。感谢您的关注和帮助! – MazarD 2010-05-27 10:24:25

+0

不用担心,您可以随时查看由Kelvin Luck制作的非常强大的datePicker,尽管 - http://www.kelvinluck.com/assets/jquery/datePicker/ – 2010-05-27 16:11:03

0

更改类.ui-datepicker-current-day

+0

与CSS的方式是jQuery的css结构化,这将被覆盖,因为上面只有等于10的CSS级顺序值。 CSS需要20或更多(两个类)的值来覆盖jQuery ui css的默认值。 – 2010-05-25 16:16:27

0

默认情况下,datepicker跟随你的主题。但是你可以覆盖任何东西。

ui-state-active是您选择日期的样式。 ui-state-highlight是它用来识别当前日期的样式。

所以做这样的事情:

#ui-datepicker-div .ui-state-active {color: #FFFFCC;} 

#ui-datepicker-div .ui-state-highlight {color: #DCDCDC;} 

您可以将这个CSS,而添加到页面或调整的主题本身。

0

就我而言,我需要删除活动类,所以:

$("#datepicker").datepicker({ 
    onSelect: function(dateText, inst) { 
    setTimeout(function(){ 
     inst.dpDiv.find('.ui-datepicker-current-day a').removeClass('ui-state-active'); 
    }, 50); 
    } 
}); 
相关问题