Modify element background color depending on date

Question

I've a list of days like this,

<ul>
    <li class="dark"><a rel="25" class="0725" style="color: rgb(255, 255, 255);">25</a></li>
    <li class="dark"><a rel="26" class="0726" style="color: rgb(255, 255, 255);">26</a></li>
    <li class="dark"><a rel="27" class="0727" style="color: rgb(255, 255, 255);">27</a></li>
    <li class="dark"><a rel="28" class="0728" style="color: rgb(255, 255, 255);">28</a></li>
    <li class="dark"><a rel="29" class="0729" style="color: rgb(255, 255, 255);">29</a></li>
    <li class="dark"><a rel="30" class="0730" style="color: rgb(255, 255, 255);">30</a></li>
    <li class="dark first"><a rel="31" class="0731" style="color: rgb(255, 255, 255);">31</a></li>
    <li class="dark"><a rel="1" class="0801" style="color: rgb(255, 255, 255);">1</a></li>
    <li class="dark"><a rel="2" class="0802" style="color: rgb(255, 255, 255);">2</a></li>
    <li class="dark"><a rel="3" class="0803" style="color: rgb(255, 255, 255);">3</a></li>
    <li class="dark"><a rel="4" class="0804" style="color: rgb(255, 255, 255);">4</a></li>
    <li class="dark"><a rel="5" class="0805" style="color: rgb(255, 255, 255);">5</a></li>
    <li class="dark"><a rel="6" class="0806" style="color: rgb(255, 255, 255);">6</a></li>
    <li class="dark"><a rel="7" class="0807" style="color: rgb(255, 255, 255);">7</a></li>
    <li class="dark"><a rel="8" class="0808" style="color: rgb(255, 255, 255);">8</a></li>
    <li class="dark"><a rel="9" class="0809" style="color: rgb(255, 255, 255);">9</a></li>
    <li class="dark"><a rel="10" class="0810" style="color: rgb(255, 255, 255);">10</a></li>
    <li class="dark"><a rel="11" class="0811" style="color: rgb(255, 255, 255);">11</a></li>
    <li class="dark"><a rel="12" class="0812" style="color: rgb(255, 255, 255);">12</a></li>
</ul>

and I'd like to change color of the current day and another color of the days before. The class is monthday format.

Sorry,The question about password is a mistake, the right question is: I would like to color the day according to today's date, and days before. — roybatty, Jul 31 '12 at 14:56

score 0 · Accepted Answer · edited May 23 '17 at 11:48

Try something like this

// get current date
var today = new Date();
// get days using getDate() and pad to 2 digits
var tdd = zeroPad(today.getDate(),2);
// get months using getMonth() and pad to 2 digits
var tmm = zeroPad(today.getMonth()+1,2);

// get current date
var yesterday = new Date();
// set date to date -1 ie yesterday
yesterday.setDate(today.getDate() - 1);
// get days using getDate() and pad to 2 digits
var ydd = zeroPad(yesterday.getDate(),2);
// get months using getMonth() and pad to 2 digits
var ymm = zeroPad(yesterday.getMonth()+1,2);

// concatenate strings to form class and use css() to set appropriate color
$('.'+tmm + tdd).css('background-color','red');
$('.'+ymm + ydd).css('background-color','blue');

Should set the color for today to red and the color for yesterday to blue. Uses the Date object, .css() and zeroPad() function taken from SO answer here

Working example here

score 0 · Answer 2 · answered Jul 31 '12 at 14:59

User the JS:

var d = new Date();
alert(d.getDate());
alert(d.getMonth());

d.getDate() will display a number between 1 and 31. g.getMonth() returns the month (from 0-11)

Instead af using 0731 as a class for your , put 0731 as an ID, and use a ByID getter to update the style class.

http://www.w3schools.com/jsref/jsref_obj_date.asp

You can help yourself now with these informations.

Modify element background color depending on date

2 Answers2