How to change a class based on the date using jQuery

Question

Hi,

I'm creating an advent calendar and I need a piece of jQuery/Javascript that will change the class on a div based on the date.

I need all previous days to have one class, the present day one class and future dates one class.

This is my source code:

<div id="container">
  <div class="box nov28">...</div>
  <div class="box dec1">...</div>
  <div class="box dec3">...</div>
  <div class="box dec5">...</div>
  <div class="box dec7">...</div>
  <div class="box dec12">...</div>
  <div class="box dec15">...</div>
  <div class="box dec17">...</div>
  <div class="box dec19">...</div>
  <div class="box dec21">...</div>
  <div class="box dec22">...</div>
  <div class="box dec23">...</div>
 </div>

It's not a simple begin 1st December and proceed for 24 days. There are 12 days of 'offers' which will not follow on exactly. This can be seen by the div classes i.e. nov28 dec1 dec3

On the class days I need the class present to be added, on previous days - the class previous and on future dates - the class future.

All help appreciated.

--EDIT --

Original post amended to be more specific.

Answer 1

Based on the html code above

var today = new Date();
today = new Date(today.getFullYear(), today.getMonth(), today.getDate());

var month = "dec";
var day = today.getDate();
if (today.getMonth() == 10) {
    month="nov";
}

var selected = $(".container > div."+month+day);
if (selected.size() > 0) {
    selected.prevAll("div").addClass("previous");
    selected.addClass("present");
    selected.nextAll("div").addClass("future");
} else {
    // based on idea from Russ Cam but
    // only loop over all div's if today there is no matching div
    // as this is more costly (loop, regex, ...)
    $('.container > div').each(function() {
        var div = $(this);
        //extract month and date from class value 
        var divMonth = div.attr("class").replace(/.*(nov|dec)\d+.*/, "$1") == 'nov' ? 10 : 11;
        var divDay = div.attr("class").replace(/.*(?:nov|dec)(\d+).*/, "$1");
        var divDate = new Date(today.getFullYear(), divMonth, divDay);
        if (divDate > today)
            div.addClass('future');
        else
            if (divDate < today)
                div.addClass('previous');
            else
                div.addClass('present');
    });
}

Check http://jsbin.com/ewuro/edit for the demonstration code (little bit adapted to show it off). Click the output tab to try it out.

Btw. http://jsbin.com/ewuro, although it should show the same as http://jsbin.com/ewuro/edit -> Output tab, doesn't work. As the framework behind jsbin seems to swallow the $1 in my regex thus the three buttons for (Nov27, Dec4 and Dec8 won't work). So just try it in the outputtab.

Answer 2

// get today's date
var today = new Date();
today = new Date(today.getFullYear(), today.getMonth(), today.getDate());

// go through the calendar windows representing each day
$('div.calendar-window').each(function() {
    var div = $(this);
    // check the date of the window.
    // let's imagine that the date is in a span with class date
    var divDate = Date.parse($('span.date', this).text());
    switch(divDate)
    {
        case divDate > today:
            div.addClass('future');
            break;               
        case divDate < today:
            div.addClass('past');
            break;
        default:
            div.addClass('today');   
            break;        
    }      
});

That's just an example, but hopefully you get the idea. Considering an advent calendar runs only for December, using the full date might be overkill and simply using getDate() and doing an integer comparison may be a better approach. Furthermore, we could just select the <span> elements an iterate through them, applying the class to the parent <div> in each case. This is meant to be food for thought :)