Clickable divs based on current date

Question

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

can be duplicate http://stackoverflow.com/questions/18982642/how-to-disable-and-then-enable-onclick-event-on-div-with-javascript — Ashan, Mar 07 '16 at 12:19
I was using CSS property pointer-events, but can figure out how to control it — ataman79, Mar 07 '16 at 12:25

score 0 · Answer 1 · answered Mar 07 '16 at 12:36

0

I would use date comparison. Perhaps something like that:

HTML

<div class="date">01.03.2016</div>
<div class="date">02.03.2016</div>
<div class="date">03.03.2016</div>
<div class="date">04.03.2016</div>
<div class="date">05.03.2016</div>

JavaScript:

var elms = document.getElementsByClassName("date");
for (var i = 0 ; i < elms.length ; i++)
{
   var el = elms[i];
   var dmy = el.innerHTML.split('.');
   var date = new Date(dmy[2], dmy[1] - 1, dmy[0]);
   if (date <= new Date()) {
      el.style.backgroundColor = "yellow";
      el.onclick = function () {
         alert("you clicked on " + this.innerHTML)        
      };
   }
}

DEMO Here's a JSFiddle

answered Mar 07 '16 at 12:36

guysigner

2,822
1
19
23

Thanks a lot, I think it should help :) I will wait and for other suggestions – ataman79 Mar 07 '16 at 12:44
Hi @remdevtec I tried your code and it's working as you show on demo, but when I have a link inside the div - it doesn't work Here is the example: `
05.03.2016
` Can you give me advice how to fix it ? – ataman79 Mar 07 '16 at 23:39
Hi @remdevtec, yes something like you last answer, but in the demo, the upcoming dates/divs are clickable and the must be not clickable – ataman79 Mar 08 '16 at 09:17
Do you want the text of date dd.mm.yyyy to be clickable/non-clickable along with the `` tag? Note that in the original demo the dates are all in the past so they are clickable. If you want to change the clickability condition just play with the `if (date <= new Date()) {` line. – guysigner Mar 08 '16 at 09:43
Thanks @remdevtec, I manage to solve it with your help and the other answers. – ataman79 Mar 09 '16 at 13:58

score 0 · Accepted Answer · answered Mar 08 '16 at 03:00

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>

Hi @Munawir your code is working here when I run code snippet, but when I copy and paste into my local machine, it doesn't work? Do you know why ? — ataman79, Mar 08 '16 at 08:50

score 0 · Answer 3 · answered Mar 08 '16 at 03:57

HTML

 <div class="date" id="First">01.03.2016</div>
 <div class="date all" id="Second">02.03.2016</div>
 <div class="date all three two"   id="Third">03.03.2016</div>
 <div class="date all three two one"   id="Fourth">04.03.2016</div>
 <div class="date all three two one zero"  id="Fifth">05.03.2016</div>

In JQuery Disable the click

  $("#First").click(function(){
     $(".all ").off('click');
   }
  $("#Second").click(function(){
     $(".three ")off('click');
   }
  $("#Third").click(function(){
     $(".two")off('click');
   }
  $("#Fourth").click(function(){
     $(".one").off('click');
   }
  $("#Fifth").click(function(){
     $(".zero")off('click');
   }

OR In JQuery Disable the div

  $("#First").click(function(){
     $(".date").removeAttr('disabled','disabled');
     $(".all ").attr('disabled','disabled');
   }
  $("#Second").click(function(){
     $(".date").removeAttr('disabled','disabled');
     $(".three ").attr('disabled','disabled');
   }
  $("#Third").click(function(){
     $(".date").removeAttr('disabled','disabled');
     $(".two").attr('disabled','disabled');
   }
  $("#Fourth").click(function(){
     $(".date").removeAttr('disabled','disabled');
     $(".one").attr('disabled','disabled');
   }
  $("#Fifth").click(function(){
     $(".date").removeAttr('disabled','disabled');
     $(".zero").attr('disabled','disabled');
   }

Clickable divs based on current date

3 Answers3