Forum Discussion

cjdinger's avatar
cjdinger
Leader
9 years ago

Creating a Day countdown in Freemarker

Just sharing this because I needed one for an event group that we've created.  We wanted a "countdown" to the event to appear on the page, but of course we're not interested in having a person update the count each day!

 

Example display:

 

Here's the code I'm using within a Custom Content Module.  In this case, our event begins on Apr 18, 2016.

 

<#assign now = .now?long>
<#assign count = (
  (
    "2016-04-18T00:00:00+0000"?datetime("yyyy-MM-dd'T'HH:mm:ssZ")?long
    - now 
  ) / (1000 * 60 * 60 * 24) + 1
)?int>
<#-- divides milliseconds*seconds*hours-in-a-day, then adds 1 to count today -->
<#if (count<=0)>
  <#assign count="ZERO">
</#if>
<div style="text-align:center; font-size:18pt; color:#333"><b>${count} days to go!</b></div>

Of course it could be fancier with alternate messages as we get closer, then during the event, then post-event.  (I'm a big advocate of "good enough" solutions, especially if it allows us to open a community space sooner!)

 

  • TariqHussain's avatar
    TariqHussain
    Boss
    9 years ago

    cjdinger if you dont have issue using javascript there you can use this pure js script . this will work fine according to your requirement

    <script>

var d = new Date();
var curr_date = d.getDate();
var curr_month = d.getMonth();/* Returns the month (from 0-11) */
var curr_month_plus= curr_month+1; /* because if the month is  4 it will show output 3 so we have to add +1 with month*/ 
var curr_year = d.getFullYear();
function dstrToUTC(ds) {
    var dsarr = ds.split("/");
     var mm = parseInt(dsarr[0],10);
     var dd = parseInt(dsarr[1],10);
     var yy = parseInt(dsarr[2],10);
     return Date.UTC(yy,mm-1,dd,0,0,0); }
    function daysTogo(ds2) {
    var now =curr_month_plus+ '/' + curr_date + '/' + curr_year;

     var d1 = dstrToUTC(now);
     var d2 = dstrToUTC(ds2);
     var oneday = 86400000;
     return (d2-d1) / oneday;    }
    var b;   
    eventDate = "4/18/2016";
    alert(+daysTogo(eventDate)+" days to go!");


</script>


    If my post is helpful and answers your question, please give "Kudos" and "Accept it as a Solution."