CODEWITHSUNDEEP
jqueryjquery-ui-datepicker
user871611
user871611

Reputation: 3461

Highlight specific days of a week in jQuery datepicker

my aim is to highlight specific days of a week in jQuery datepicker.

For example I want to highlight Tuesdays and Thursdays. I've seen many examples how to highlight specific dates(see: http://jquerybyexample.blogspot.com/2012/05/highlight-specific-dates-in-jquery-ui.html). But not a single one that covers my needs.

Any hints?

Upvotes: 1

Views: 3477

Answers (3)

No Results Found
No Results Found

Reputation: 102745

You could do this with only CSS using the + adjacent selector if you can assume the week starts on Sunday. It may look a little ridiculous but it will work in any browser that supports + and :first-child (Which includes IE7 and up).

/* Tuesday:                Su               Mo   Tu            */
.ui-datepicker-calendar tr td:first-child + td + td a,
/* Thursday:               Su               Mo   Tu   We   Th  */
.ui-datepicker-calendar tr td:first-child + td + td + td + td a {
    background:red;
}
​

Demo: http://jsfiddle.net/jnGhV/1/

Upvotes: 2

Software Guy
Software Guy

Reputation: 3280

This should do it:

$(document).ready(function() {
    $('#txtDate').datepicker({
        beforeShowDay: function(date) {
            if(date.getDay() == 2 || date.getDay() == 4) {
                return [true, "Highlighted", ''];
            } else {
                return [true, '', ''];
            }

        }
    });
});​

JSFiddle: http://jsfiddle.net/XuExp/

Upvotes: 1

Nelson Benítez León
Nelson Benítez León

Reputation: 50563

You could adapt the example you linked, to do what you want, like this:

CSS:

.Highlighted a{
   background-color : Green !important;
   background-image :none !important;
   color: White !important;
   font-weight:bold !important;
   font-size: 12pt;
}

Javascript:

$(document).ready(function() {
    $('#datepicker').datepicker({
        beforeShowDay: function(date) {
            var day = date.getDay();
            if (day == 2 || day == 4) {
                return [true, "Highlighted", date];
            }
            return [true, '', ''];
        }
    });
});​

that should do it.

Upvotes: 2

Related Questions