我正在使用beforeShowDay
,并已将班级specialDay
分配到我日历中的特定日期;这工作正常,但我无法理解如何设置类的样式以及主题滚动的css如何正常工作。我试过了:
td .specialDate {
background: #33CC66;
}
但这对日历的外观没有影响。有什么想法吗?
答案 0 :(得分:15)
我有同样的问题,幸运的是我找到了答案。 当您禁用一天(设置为“false”)时,有效的是指定一个类(“.specialDate”)来更改背景颜色,但是如果日期已启用则不会,因为我们有另一个样式的锚点(“a”)覆盖分配给“td”锚点的类。
因此,如果您的日期已启用选择并想要更改样式,则必须编辑继承的“a”锚点,如下所示:
.specialDate a { background: #33CC66 !important; }
添加“!important ”(如果您原谅重复)指示以覆盖其他设置非常重要。
希望这有帮助!
答案 1 :(得分:4)
像这样创建你的css样式:
<style type="text/css">
td.specialDay, table.ui-datepicker-calendar tbody td.specialDay a {
background: none !important;
background-color: #fffac2 !important;
color: #006633;
}
</style>
然后使用beforeShowDay选项将您的样式添加到日历。
$('#datepicker').datepicker('option', 'beforeShowDay', highlightDays);
// ------------------------------------------------------------------
// highlightDays
// ------------------------------------------------------------------
function highlightDays(date) {
for (var i = 0; i < dates.length; i++) {
if (SOME CONDITION TO DETERMIN SPECIAL DAY) {
return [true, 'specialDay'];
}
}
return [true, ''];
}
答案 2 :(得分:1)
.specialDate span {background-color:#ff0000!important;}
如果要禁用透明效果
.specialDate {filter:Alpha(Opacity=100)!important; opacity: 1!important}
答案 3 :(得分:1)
如果ui日历有主题,则必须为specialDate属性禁用background-image
:
.specialDate a {
background-image: none !important;
background: #33CC66 !important;
}
答案 4 :(得分:0)
每当我使用JQuery UI时,我会使用Firebug检查应用于特定元素的任何样式,这样您就可以轻松识别需要使用的CSS元素。
答案 5 :(得分:0)
这里有一些突出显示当前日期或相关文本框中的日期。
风格:
.dateHighlight a { background: #58585a !important; }
剧本:
var pickerDate;
$("#pickerId").datepicker({
// get the date to be highlighted; use today if no date
beforeShow: function() {
pickerDate = $("#pickerId").datepicker("getDate");
if (pickerDate == null) pickerDate = new Date((new Date()).setHours(0, 0, 0, 0));
},
// add css class to the date
beforeShowDay: function(date) {
if (date.getTime() == pickerDate.getTime()) {
return [true, 'dateHighlight', '']
}
return [true]
}
});
答案 6 :(得分:0)
点击即可使用您需要的所有CSS:
var checkin = $('.dpd1').datepicker()
.on('click', function (ev) {
$('.datepicker').css("z-index", "999999999");
}).data('datepicker');