Hide/Show html content based on a date
Last Post 1/1/1900 12:00 AM by Anonymous. 0 Replies.
Author Messages
Deleted User
New Member
New Member
Posts:62


--
6/13/2016 12:34 PM  
I had a need to hide some text after a date passed. With the help of a forum post by jlnewman on the WebDeveloper.com site (URL here - http://www.webdeveloper.c...d-on-a-specific-date ),

I was able to set this up.

The directions for doing this in DNN follows:

1. Go to the Admin/Site Settings page and insert this line into the Stylesheet Editor and save the stylesheet:
.DateRange, .DateDiv { display: none;}

Then you will need some javascript on the page where this feature is needed. There are a number of ways to insert javascript into a page. For this example we will just use an HTML module.

2. So add a new HTML module to the page,

3. Edit the settings on the module to not show the container. (Don't hide it using permissions)

4. Edit Content on this module and then enter the html mode using the link at the bottom-left of the editor.

5. Paste the following javascript into the editor and save.

<script language=”text/JavaScript”>
$(function() {
$(".DateDiv").each(function(index) {
var sRange = $(this).find(".DateRange").html();
var arrTemp = sRange.split(" to ");
var dtFrom = new Date(arrTemp[0]);
var dtTo = new Date(arrTemp[1]);
var dtNow = new Date();
if (dtNow >= dtFrom && dtNow <= dtTo)
$(this).show();
});
});
</script>

6. Then enter your content that you need to show and or hide by date. In my example I did this in another HTML module.

7. then put the HTML module in html mode, find the text that needs to be shown/hidden and surround it with the a couple spans and classes. Use the following example as a guide.

The Quick <span class="DateDiv"><span class="DateRange">6/2/2018 to 6/30/2018</span>Red </span>Fox...<p> </p>

8. Edit the dates and the text before the second </span> tag as needed.

9. Save

In this example the word "Red" will appear during the dates and disappear when the date is outside this range. You may have more content inside the span and or images or other content as well.



---