How to do time check in jQuery?

Question

I hava li in HTML:

<li>11.8</li> <!--November 8th-->
<li>11.9</li>
<li>11.11</li>
<li>11.12</li>

How can I use jQuery to check the date then change '11.12' to 'today'? (suppose today is 11.12)

Like this:

<li>11.8</li> <!--November 8th-->
<li>11.9</li>
<li>11.11</li>
<li>Today</li>

Answer 1

One, non-jQuery, approach:

// today's date:
var date = new Date(),
  // create an array featuring the month (months are zero-indexed) and day,
  // join the array elements together with a period to form a string:
  dateString = [date.getUTCMonth() + 1, date.getDate()].join('.');

// iterate over the <li> elements using Array.prototype.forEach():
Array.prototype.forEach.call(document.querySelectorAll('li'), function(liElem) {
  // get the current text of the <li> element (held in liElem variable):
  var text = liElem.textContent;

  // set the textContent to 'Today' (if the trimmed text is equal to the dateString),
  // or to its current textContent if not:
  liElem.textContent = text.trim() === dateString ? 'Today' : text;
});

<ol>
  <li>11.8</li>
  <!--November 8th-->
  <li>11.9</li>
  <li>11.11</li>
  <li>11.12</li>
</ol>

To be a little more complete, with 'yesterday', 'tomorrow', you could use an if within the forEach() call:

var date = new Date(),
    // we'll be using this inside of the forEach (so caching it):
  day = date.getDate(),
  dateString = [date.getUTCMonth() + 1, day].join('.');

Array.prototype.forEach.call(document.querySelectorAll('li'), function(liElem) {
  var text = liElem.textContent,
      // finding the text following the '.' character, retrieving it:
    textDay = text.split('.').pop(),
      // creating a variable for later use:
    relativeDay;

  // if the day we found above is equal to today's (day) date minus one
  if (+textDay === (day - 1)) {
    // we assume it's yesterday (this is a naive check, and does not
    // account for months which would need to be considered in production):
    relativeDay = 'yesterday';
  } else if (+textDay === day) {
    // if the day found above is equal to today's date we assume it's
    // 'today':
    relativeDay = 'today';
  } else if (+textDay === (day + 1)) {
    // if they day found above is equal to today's date plus one, it's
    // tomorrow:
    relativeDay = 'tomorrow';
  } else {
    // otherwise we return the same text:
    relativeDay = text;
  }
  liElem.textContent = relativeDay;

});

<ol>
  <li>11.8</li>
  <!--November 8th-->
  <li>11.9</li>
  <li>11.11</li>
  <li>11.12</li>
  <li>11.13</li>
  <li>11.14</li>
</ol>

And a potentially-complete (assuming only month-day dates are supplied):

function parseDateList(selector, separator) {
  separator = 'undefined' === typeof separator ? '.' : separator;
  var elems = document.querySelectorAll(selector),
    date = new Date(),
    day = date.getDate(),
    month = date.getUTCMonth() + 1,
    textProp = 'textContent' in document ? 'textContent' : 'innerText',
    text,
    textDay,
    textMonth,
    textDate,
    relativeDay;

  if (elems.length) {
    Array.prototype.forEach.call(elems, function(liElem) {
      text = liElem[textProp],
        textDate = text.trim().split(separator);
      textMonth = parseInt(textDate.shift(), 10);
      textDay = parseInt(textDate.pop(), 10);
      if (textMonth === month) {
        if (textDay === (day - 1)) {
          relativeDay = 'yesterday';
        } else if (textDay === day) {
          relativeDay = 'today';
        } else if (textDay === (day + 1)) {
          relativeDay = 'tomorrow';
        } else {
          relativeDay = text;
        }
        liElem[textProp] = relativeDay;
      }
    });
  }
}

parseDateList('ol li', '.');

<ol>
  <li>11.8</li>
  <!--October 8th-->
  <li>10.9</li>
  <li>10.11</li>
  <li>10.12</li>
  <li>10.13</li>
  <li>10.14</li>
  <li>10.8</li>
  <!--November 8th-->
  <li>11.9</li>
  <li>11.11</li>
  <li>11.12</li>
  <li>11.13</li>
  <li>11.14</li>
  <li>11.8</li>
  <!--December 8th-->
  <li>12.9</li>
  <li>12.11</li>
  <li>12.12</li>
  <li>12.13</li>
  <li>12.14</li>
</ol>

References:

• Array.prototype.forEach().
• Date().

Answer 2

Filter matching li elements and set their text property to today:

var selectDate = getToday();

$('li').filter(function () {
    return $(this).text().trim() === selectDate;
}).text('today');

function getToday() {
    var date = new Date();
    return (date.getMonth() + 1) + '.' + date.getDate();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li>11.9</li>
    <li>11.11</li>
    <li>11.12</li>
    <li>11.13</li>
</ul>

Answer 3

Try with this:

$(function(){
    var date = new Date();
    $('li:contains(' date.getMonth()+1 +  '.' + date.getDate() + ')').html('Today');
});

Demo