In my web page, I have a table of dates (my date format is dd-mm-yyyy)
<tr>
<td>05-03-2012</td>
<td name="expiration">09-07-2012</td>
<td>08-10-2012</td>
<tr>
What I want is to put in red color expiration dates when their value is > current date, using Jquery.
So, I think I am going to use something like :
<script>
//don't know how to retrieve the expiration date and check if it is after the
//current date
$('td[name=expiration]').css({"color":"red"});
</script>
Prefer to use a class instead of a name so your selector is more efficient:
<tr>
<td>05-03-2012</td>
<td class="expiration-date">09-07-2012</td>
<td>08-10-2012</td>
</tr>
var now = new Date;
$('.expiration-date').text(function (i, v) {
if (now < new Date(v)) {
$(this).addClass('unexpired');
}
});
Here's an example in a jsFiddle: http://jsfiddle.net/qRdNe/
This doesn't account for any errors in date time parsing.
$('td[name=expiration]').each(function(){
var innerText = $(this).text();
var date = new Date(innerText);
var today = new Date();
if(date > today){
//Set css here
}
else{
//Set default here
}
});
Date object construction for the variable date as described below: var str = innerText.split("-"); var date = new Date(str[2],str[0],str[1],0,0,0,0);Date object with the text of once of these cells, you'll get the wrong date. Using the string from her example, you get Dec 31, 1969.I have basically put together a working answer its from different bits given here but corrected where needed, the date for a month starts from zero. Maybe you don't want to accept this as the right answer , i'm just putting all of it here so its easy to reference.
$('.expiration').text(function(i,v){
var datestr = v.split("-");
d = new Date(datestr[2],datestr[0]-1,datestr[1],0,0,0,0);
var now = new Date();
if(console)console.log(d);
if(d>now )
{
$(this).css("color","red");
}
});
