Question

I have a datepicker that has a special highlight using beforeShowDay. However, the highlight style prevents the selected (“ui-btn-active”) style, which is automatically applied when a cell is clicked. What is the best approach to get the selected style on top?

<div id="datepicker"></div>

.Highlighted a{
background: none !important;
background-color: #990066 !important;
}

        $('#datepicker').datepicker({
            beforeShowDay: function (date) {
                return [true, SelectedDates[date] ? 'Highlighted' : ''];
            }
        });

Adding this has no effect:

.Highlighted ui-btn-active a{
background: none !important;
background-color: white !important;
}

Answer 1

  beforeShowDay: function (date) {
                var selected = $("#datepicker").datepicker('getDate');
                if (date.getDate() != selected.getDate()) return [true, SelectedDates[date] ? 'Highlighted' : ''];
                else return [true, '']
            }