Countdowns – A second method

I have already published a method to display countdowns in SharePoint lists, and generally speaking compare a date to today’s date. My method uses the DVWP and Javascript.

Alexander Bautz, a reader from Norway, has come up with slightly different approach. He has mixed two of my posts, the countdown and the “HTML calculated column“, to create a script that achieves the same result. A significant advantage of his approach is that you don’t need SharePoint Designer.
Here is the script:

<script type="text/javascript">
<!-- Script created by Alexander Bautz - alexander@emskonsult.no                          -->
<!-- Inspired by Christophe@PathToSharePoint.com                                          -->
<!-- This script searches for calculated fields that are "marked" vith "Due:" and         -->
<!-- select them if they are less than today's date, or less than the "offset" as         -->
<!-- specified in the configuration in the top of the script                              -->

<!-- Create a calculated field in the list with the following formula:                    -->
<!-- =IF(DueDate="","N/A","Due: "&MONTH(DueDate)&"/"&DAY(DueDate)&"/"&YEAR(DueDate))      -->

<!-- The data type returned from this formula is: Date and Time                           -->
<!-- The reason for returning Date and Time is that the date fields                       -->
<!-- displays in <nobr> tags and therefore easier to search for because                   -->
<!-- there are fewer <nobr> tags than <td> tags                                           -->

<!-- ************************************************** -->
<!-- ***************  Change these ******************** -->
<!-- ***  yDaysOffset are the offset "Yellow Light" *** -->
<!-- ***  rDaysOffset are the offset "Red Light"    *** -->
<!-- ************************************************** -->

var yDaysOffset = 5; 
var rDaysOffset = 0; 

<!-- plus or minus on todaysDate:                     -->
<!-- minus marks the date x days after                -->
<!-- plus marks the date x days before                -->

<!-- ************************************************ -->
<!-- **** Do not change anything below this line **** -->
<!-- ************************************************ -->

// call script
findDatefields();

function findDatefields() {
// Find today's date
var todaysDate = new Date();

var arr = document.getElementsByTagName('nobr');
	for (var i=0;i < arr.length; i++ ) {
	// Check if it is "our field"
		if(arr[i].innerHTML.indexOf("Due:") == 0) {

		var sepDate = arr[i].innerHTML.substring(5).split("/",3);
		var m = sepDate[0];
		var d = sepDate[1];
		var y = sepDate[2];

		// build the datestring
		var fieldDate = new Date(y,m-1,d,00,00,00);

		var frendlyFieldDate = m + "/" + d + "/" + y; 

		// Round overdueDays with one decimal
		var overDueByDays = (Math.round(((todaysDate.getTime() - fieldDate.getTime())/86400000)*10)/10);

		// OffsetDate - Create the traffic lights
		var date = new Date();
		var yDay = date.getDate() + yDaysOffset;
		var rDay = date.getDate() + rDaysOffset;
		var Month = date.getMonth();
		var Year = date.getFullYear();
		var redOffsetDate = new Date(Year,Month,rDay,00,00,00);
		var yellowOffsetDate = new Date(Year,Month,yDay,00,00,00);


			if(yellowOffsetDate.getTime() < fieldDate.getTime() && redOffsetDate.getTime() < fieldDate.getTime()){
			//alert("green");
			arr[i].innerHTML = "<DIV title='Due " + frendlyFieldDate + "' style='font-weight:bold; font-size:24px; color:green'>&bull;</DIV>";
			}
			else if(yellowOffsetDate.getTime() >= fieldDate.getTime() && redOffsetDate.getTime() < fieldDate.getTime()){
			//alert("yellow");
			arr[i].innerHTML = "<DIV title='Due " + frendlyFieldDate + "' style='font-weight:bold; font-size:24px; color:yellow'>&bull;</DIV>";
			}
			else if(redOffsetDate.getTime() == fieldDate.getTime()){
			//alert("red");
			arr[i].innerHTML = "<DIV title='Due today!' style='font-weight:bold; font-size:24px; color:red'>&bull;</DIV>";
			}
			else if(redOffsetDate.getTime() > fieldDate.getTime()){
			//alert("red");
			arr[i].innerHTML = "<DIV title='Overdue by " + overDueByDays + " day(s)" + "' style='font-weight:bold; font-size:24px; color:red'>&bull;</DIV>";
			}

		}
	}
}

<!-- For it to work in collapsed views                 -->
<!-- Tribute to Christophe@PathToSharePoint.com        -->

function ExpGroupRenderData(htmlToRender, groupName, isLoaded) {  
var tbody=document.getElementById("tbod"+groupName+"_");  
var wrapDiv=document.createElement("DIV");  
wrapDiv.innerHTML="<TABLE><TBODY id=\"tbod"+ groupName+"_\" isLoaded=\""+isLoaded+ "\">"+htmlToRender+"</TBODY></TABLE>";  
tbody.parentNode.replaceChild(wrapDiv.firstChild.firstChild,tbody); 
findDatefields(); 
}   
</script>

This specific script displays a traffic light, and shows date information on mouse over. You can of course adapt the rendering to fit your own needs.

The instructions are included in the above code:
- In your SharePoint list, create a calculated column and include Alexander’s formula
- Add a CEWP to your page, under your SharePoint list, where you’ll place the code.

Thanks for sharing Alexander!