JQuery adding a class to $(this) with onclick()

Question

I am outputting a calendar with PHP and each of the td elemets which represents a date has the following code:

onclick="return getDate(2016 + /10/ + 5);"

This is calling a function on the page which does two things:

1. It evaluates the passed date to see if it is greater or lesser then the current date (Y-m-d) using moment.js
2. It adds a class of .day-selected if the date is over the current date and a class of .day-expired otherwise.

Here is the function:

function getDate(date) {

    var dateToday = moment();
    var selectedDate = moment(date);

    if (selectedDate.isBefore(dateToday, 'day')) {
        $(this).addClass('day-expired');
        return true;
    } else {
        $(this).addClass('day-selected');
        return false;
    }
}

It is not working. I want to make $(this) which is the specific td element that was clicked, have a new class when it is clicked depending on the date that is passed. Here is a snippet of what I have so far...

function getDate(date) {

    var dateToday = moment();
    var selectedDate = moment(date);
    
    if (selectedDate.isBefore(dateToday, 'day')) {
        $(this).addClass('day-expired');
        return true;
    } else {
        $(this).addClass('day-selected');
        return false;
    }
}

.day-selected {
    background:#7cd97c;
    color:#fff;
}

.day-expired {
    background:#ed5252;
}

.day {
  background:#0000ff;
  padding:30px;
  color:#fff;
}

<script src="http://momentjs.com/downloads/moment.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>
<tr>
  <td>
    <div class="day" href="" onclick="return getDate(2016 + /10/ + 2);">
      2
    </div>
  </td>
  <td>
  <div class="day" href="" onclick="return getDate(2016 + /10/ + 3);">
    3
  </div>
  </td><td id="tt-calendar-today">
  <div class="day" href="" onclick="return getDate(2016 + /10/ + 4);">
    4
  </div>
  </td><td>
  <div class="day" href="" onclick="return getDate(2016 + /10/ + 5);">
    5
  </div>
  </td><td>
  <div class="day" href="" onclick="return getDate(2016 + /10/ + 6);">
    6
  </div>
  </td><td>
  <div class="day" href="" onclick="return getDate(2016 + /10/ + 7);">
    7
  </div>
  </td><td>
  <div class="day" href="" onclick="return getDate(2016 + /10/ + 8);">
    8
  </div>
  </td>
</tr>
</table>

Answer 1

First, a DIV tag cannot have an href attribute. Second, what is the need for concatenating your date e.g. 2016 + /10/ + 2? Why not just do 2016/10/2?

Regardless, instead of using onclick attribute, attach an event handler using jQuery's click method. Also, to pass custom information, we'll also use HTML5 data-attribute.

It would look as follows:

HTML

<div class="day" data-date="2016/10/2">2</div>

JavaScript

$('.day').click(function () {
    var dateToday = moment();
    var selectedDate = moment($(this).data('date'));

    // this refers to the DIV, so we need to move one level up to get the related TD

    if (selectedDate.isBefore(dateToday, 'day')) {
        $(this).closest('td').addClass('day-expired');
    } else {
        $(this).closest('td').addClass('day-selected');
    }
});