Изменить CSS jquery datepicker с beforeShowDay

Question

Я использую beforeShowDay и назначил класс specialDay определенным дням в моем календаре; это работает нормально, однако у меня возникают проблемы с пониманием того, как стилизовать класс и как работает CSS из тематического ролика в целом. Я пробовал:

td .specialDate {
    background: #33CC66;
}

но это не влияет на внешний вид календаря. Есть идеи?

Answer 1

У меня была такая же проблема, к счастью, я нашел ответ. При отключении дня (установленного в «false») допустимо назначать класс («.specialDate») для изменения цвета фона, но не при включенной дате, потому что у нас есть еще один стилизованный якорь («a»), который переопределяет класс, назначенный привязке "td".

Итак, если ваша дата включена для выбора и вы хотите изменить стили, вы должны отредактировать унаследованный якорь "a", например:

.specialDate a { background: #33CC66 !important; }

Очень важно, чтобы вы добавили указание «! Important » (если вы простите повторение), чтобы переопределить другие настройки.

Надеюсь, это поможет!

Answer 2

Создайте свой стиль 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, ''];
}

Answer 3

Если в пользовательском календаре есть тема, необходимо отключить background-image для атрибута specialDate:

.specialDate a { 
    background-image: none !important;
    background: #33CC66 !important;
}

Answer 4

.specialDate span {background-color:#ff0000!important;}

если вы хотите отключить эффект прозрачности

.specialDate {filter:Alpha(Opacity=100)!important; opacity: 1!important}

Answer 5

С помощью клика вы можете сделать все необходимые CSS:

var checkin = $('.dpd1').datepicker()
.on('click', function (ev) {
        $('.datepicker').css("z-index", "999999999");
}).data('datepicker');

Answer 6

Вот бит, который выделит либо текущую дату, либо дату из соответствующего текстового поля.

Стиль:

.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]
    }
});

Answer 7

Всякий раз, когда я использую материал пользовательского интерфейса JQuery, который я использую Firebug , чтобы проверить любые стили, применяемые к определенным элементам, это позволит вам легко определить, с какими элементами CSS вам нужно играть. *