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?

Alex Char · Accepted Answer · 2015-11-20 14:13:14Z

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()

Andrew Bone · Accepted Answer · 2015-11-20 14:38:04Z

1

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/

answered Nov 20, 2015 at 14:38

Andrew Bone

7,3112 gold badges21 silver badges35 bronze badges

Comments

Culme · Accepted Answer · 2015-11-20 14:29:21Z

Alex's answer is good. I'll add an optional one, which - depending on the structure of the HTML - may be easier to use, since it operates more directly on the link tag itself. First, add a data attribute (e.g. data-datetime) to the links, specifying the date for each link:

<a href="bbc.co.uk" class="datelink" data-datetime="2015-11-1"> SOME LINK </a>

Full sample HTML would be like this (long lines = hard to read on SO):

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

Then run something like this in $(document).ready or similar:

var now = new Date();
$('.datelink').each(function ()
{
    var $link = $(this);
    if (now > Date.parse($link.data('datetime'))) {
        $link.show();
    } else {
        $link.hide();
    }
})

Collectives™ on Stack Overflow

Jquery/ javascript display link using html date

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related