Clickable divs based on current date

I have a page with several divs, containing image with link, which I want to become from unclickable to clickable based on the date. For example - I have 5 divs for 5 days (01.03.2016, 02.03.2016, 03.03.2016, 04.03.2016, 05.03.2016). Inside these divs I have image with link.

on 01.03.2016 - only div 1 to be clickable, all others not

on 02.03.2016 - only div1 and div2 to be clickable, all other not and etc...

on 05.03.2016 - all five divs to be clickable

Thank you in advance

Solution

var divs = document.getElementsByClassName("date");

for (i = 0 ; i < divs.length ; i++) {
  divs[i].style.pointerEvents = 'none';
}

for (i = 0 ; i < divs.length ; i++) {  
  var divDate = divs[i].id.split('.');
  var date = new Date(divDate[2], divDate[1] - 1, divDate[0]);
  
  if (date <= new Date()) {
    divs[i].style.pointerEvents = 'auto';
  }
}

<div class="date" id="01.03.2016">01.03.2016 <a href="ihttp://google.com"><img src="images/image1.jpg" alt="Google Image" width="138" height="138" class="img_rounded" /></a></div>
<div class="date" id="02.03.2016">02.03.2016 <a href="ihttp://google.com"><img src="images/image1.jpg" alt="Google Image" width="138" height="138" class="img_rounded" /></a></div>
<div class="date" id="03.03.2016">03.03.2016 <a href="ihttp://google.com"><img src="images/image1.jpg" alt="Google Image" width="138" height="138" class="img_rounded" /></a></div>
<div class="date" id="04.03.2016">04.03.2016 <a href="ihttp://google.com"><img src="images/image1.jpg" alt="Google Image" width="138" height="138" class="img_rounded" /></a></div>
<div class="date" id="09.03.2016">09.03.2016 <a href="ihttp://google.com"><img src="images/image1.jpg" alt="Google Image" width="138" height="138" class="img_rounded" /></a></div>