Jquery/ javascript display link using html date

Question

I am trying to get links to display dependent on the time attribute in html is this possible? Or is there a better way of doing it. I understand the limitations of using this client side ( but it should not be a problem for the users) html

var now = new Date();

if(now > datetime) // today is after linkdate
{
     $('.datelink').show();
}

body {
  color:red;
}

.datelink{
    display:none;
}

  <li>WHITBY  <time datetime="2015-11-1">November 1st 11.00</time><a href="bbc.co.uk" class="datelink"> SOME LINK </a>  </li>
    <li>EASINGWOLD  <time datetime="2015-11-2">November 2nd 10.34</time><a href="bbc.co.uk" class="datelink"> SOME LINK </a>  </li>
    <li>DARLINGTON  <time datetime="2015-11-15">November 15th 9.30</time><a href="bbc.co.uk" class="datelink"> SOME LINK </a>  </li>
    <li>RIPON CITY  <time datetime="2015-11-16">November 16th 11.00</time><a href="bbc.co.uk" class="datelink"> SOME LINK </a>  </li>
    <li>ROMANBY  <time datetime="2015-11-20">November 20th 13.00</time><a href="bbc.co.uk" class="datelink"> SOME LINK </a>  </li>
    <li>KIRKBYMOORSIDE <time datetime="2015-11-21">November 21st</time><a href="bbc.co.uk" class="datelink"> SOME LINK </a>  </li>
    <li>BEDALE  <time datetime="2015-11-22">November 22nd 8.30</time><a href="bbc.co.uk" class="datelink"> SOME LINK </a> </li>
    <li>CATTERICK  <time datetime="2015-11-23">November 23rd 9.00</time><a href="bbc.co.uk" class="datelink"> SOME LINK </a> </li>

is it possible to get the 'datetime' from the html to the if statement in jquery?

Answer 1

You can use the following code:

//store the current datetime in a global variable
var now = new Date();

//iterate through each time element
$("ul li time").each(function() {
  //get the date of each one from datetime attribute
  var dateTime = Date.parse($(this).attr("datetime"));
  //compare with the current datetime as in OP
  if (now > dateTime) // today is after linkdate
  {
    //shows the elements that match the above condition
    $(this).next('a.datelink').show();
  }
});

body {
  color: red;
}
.datelink {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>WHITBY
    <time datetime="2015-11-1">November 1st 11.00</time><a href="bbc.co.uk" class="datelink"> SOME LINK </a> 
  </li>
  <li>EASINGWOLD
    <time datetime="2015-11-2">November 2nd 10.34</time><a href="bbc.co.uk" class="datelink"> SOME LINK </a> 
  </li>
  <li>DARLINGTON
    <time datetime="2015-11-15">November 15th 9.30</time><a href="bbc.co.uk" class="datelink"> SOME LINK </a> 
  </li>
  <li>RIPON CITY
    <time datetime="2015-11-16">November 16th 11.00</time><a href="bbc.co.uk" class="datelink"> SOME LINK </a> 
  </li>
  <li>ROMANBY
    <time datetime="2015-11-20">November 20th 13.00</time><a href="bbc.co.uk" class="datelink"> SOME LINK </a> 
  </li>
  <li>KIRKBYMOORSIDE
    <time datetime="2015-11-21">November 21st</time><a href="bbc.co.uk" class="datelink"> SOME LINK </a> 
  </li>
  <li>BEDALE
    <time datetime="2015-11-22">November 22nd 8.30</time><a href="bbc.co.uk" class="datelink"> SOME LINK </a> 
  </li>
  <li>CATTERICK
    <time datetime="2015-11-23">November 23rd 9.00</time><a href="bbc.co.uk" class="datelink"> SOME LINK </a> 
  </li>
</ul>

References

Date.parse()

.next()

.each()

Answer 2

I like to give a JQuery free option too :-)

Code:

var now = new Date(),
    dateTimeSelector = document.querySelectorAll('time'),
    dateLinkSelector = document.querySelectorAll('.datelink'),
    i;

for (i = 0; i < dateTimeSelector.length; ++i) {
    dateTime = Date.parse(dateTimeSelector[i].getAttribute('datetime'));
    console.log(dateTime + now);
    if (now > dateTime) {
        dateLinkSelector[i].style.display = "inline";
    }
}

Link:

http://jsfiddle.net/link2twenty/0uu7z98h/3/