Question

I’m looking for help to accomplish this seemingly simple task. I just don’t have the know-how to figure this out.

Basically, I have a form that I select a date (for the due date) for a work order from jQuery’s datepicker. The results are displayed on a separate page in a table with other work orders.

I am trying to figure out how to determine if the shown date in the table is past due or not and change the CSS if the date is before today’s date. Because there are several rows in the table and each row has a due date that needs to be evaluated, this has stumped me.

<table>
<tr>
<td class="dueDate">November 1, 2012</td>
</tr>
<tr>
<td class="dueDate">November 4, 2012</td>
</tr>
<tr>
<td class="dueDate">November 26, 2012</td>
</tr>
</table>

This is the layout of the table when the form is displayed. And this is the closest that I can think to put together to determine if the date displayed is before today’s date or not.

$('.dueDate').each(function(){
var dueDate = $(this).val();
var today = new Date();
if (Date.parse(dueDate) < Date.parse(today)){
$(".dueDate").addClass("pastDue");
}        
});

This doesn’t seem to be working. Any ideas?

Answer 1

Try Date.parse

  if (Date.parse(dueDate) < Date.parse(today)) {
      $(".dueDate").addClass("pastDue");// . for class
  }