Countdown with regional settings

Alexander Bautz has released a new version of his countdown, to take into account regional date formats.

The sample code below is for a “Month/Day/Year” format. If for example you use “Day.Month.Year” instead, you’ll need to update the code as follows:
var OrderDay = 1;
var OrderMonth = 2;
var OrderYear = 3;
var splitChar = ‘.’; // The separator between the day month year of your calculated dateField

<script type="text/javascript">
//                                                                                      
// COUNTDOWN + HTML CALCULATED COLUMN                                                   
//                                                                                      
// The first part of this script was created by Alexander Bautz                         
// 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))
// Remember to update the formula according to your date format and to
// Specify the order of apperance of the dateFields below.

// 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 

// Specify the order of apperance of the dateFields in your Formula (1 = first position, 2 = second position and 3 = third position)
var OrderDay = 2;
var OrderMonth = 1;
var OrderYear = 3;
var splitChar = '/'; // The separator between the day month year of your calculated dateField
var LeadInTextBeforeDate = 'Due:'; // The leadin text of your calculated dateField

// MouseOver text on traffic-lights
var MouseOverBeforeDaysCount = 'Due in: '; 
var MouseOverBeforeOverdueDaysCount = 'Overdue by: '; 
var MouseOverAfterDaysCount = ' Day(s)';
var MouseOverDueToday = 'Due Today!';      
     
// ************************************************ 
// **** Do not change anything below this line **** 
// ************************************************ 

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&#91;i&#93;.innerHTML.indexOf(LeadInTextBeforeDate) == 0) {

		var sepDate = arr&#91;i&#93;.innerHTML.substring(LeadInTextBeforeDate.length + 1).split(splitChar,3);

		var m = sepDate&#91;OrderMonth - 1&#93;;
		var d = sepDate&#91;OrderDay - 1&#93;;
		var y = sepDate&#91;OrderYear - 1&#93;;

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

		// Round dueBy with one decimal
		var DueByDays = (Math.round(((fieldDate.getTime() - todaysDate.getTime())/86400000)*10)/10);
		// 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&#91;i&#93;.innerHTML = "<DIV title='" + MouseOverBeforeDaysCount + DueByDays + MouseOverAfterDaysCount + "' style='font-weight:bold; font-size:24px; color:green'>&bull;</DIV>";
			}
			else if(yellowOffsetDate.getTime() >= fieldDate.getTime() && redOffsetDate.getTime() < fieldDate.getTime()){
			//alert("yellow");
			arr&#91;i&#93;.innerHTML = "<DIV title='" + MouseOverBeforeDaysCount + DueByDays + MouseOverAfterDaysCount + "' style='font-weight:bold; font-size:24px; color:yellow'>&bull;</DIV>";
			}
			else if(redOffsetDate.getTime() == fieldDate.getTime()){
			//alert("red");
			arr[i].innerHTML = "<DIV title='" + MouseOverDueToday + "' style='font-weight:bold; font-size:24px; color:red'>&bull;</DIV>";
			}
			else if(redOffsetDate.getTime() > fieldDate.getTime()){
			//alert("red");
			arr[i].innerHTML = "<DIV title='" + MouseOverBeforeOverdueDaysCount + overDueByDays + MouseOverAfterDaysCount + "' style='font-weight:bold; font-size:24px; color:red'>&bull;</DIV>";
			}

		}
	}
}

// call script
findDatefields();
//
//
// Text to HTML - List views
// Feedback and questions: Christophe@PathToSharePoint.com
//
var theTDs = document.getElementsByTagName("TD");
var i=0;
var TDContent = " ";
while (i < theTDs.length) {
try {
TDContent = theTDs&#91;i&#93;.innerText || theTDs&#91;i&#93;.textContent;
if ((TDContent.indexOf("<DIV") == 0) && (TDContent.indexOf("</DIV>") >= 0)) {
theTDs[i].innerHTML = TDContent;
}
}
catch(err){}
i=i+1;
}
//
// ExpGroupRenderData overwrites the default SharePoint function
// This part is needed for collapsed groupings
//
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>";
var theTBODYTDs = wrapDiv.getElementsByTagName("TD"); var j=0; var TDContent = " ";
while (j < theTBODYTDs.length) {
try {
TDContent = theTBODYTDs&#91;j&#93;.innerText || theTBODYTDs&#91;j&#93;.textContent;
if ((TDContent.indexOf("<DIV") == 0) && (TDContent.indexOf("</DIV>") >= 0)) {
theTBODYTDs[j].innerHTML = TDContent;
}
}
catch(err){}
j=j+1;
}
tbody.parentNode.replaceChild(wrapDiv.firstChild.firstChild,tbody);
findDatefields();
}
</script>

7 thoughts on “Countdown with regional settings

  1. Thank you for posting this. This will help in focusing on the important items of a list.

    I seem to have some problem with my sharepoint, as I have tried every which way I can to try and get this to work, but the WebPart I have added to my list page is always blank, yet my list contains 20 items or so, most with dates, and I have added the Due: Date field. I suspect that I am missing something obvious as no one else has commented on a similar issue.

    If anyone has any ideas, it will be appreciated.

  2. While working through teh World Clock example I realized that “need to drop the CEWP after all the views you want to change”, this fixed my issue from my previous comment. Thanks

  3. Thanks! this i a great way of displaying overdue items/documents. Very nice!

    It would be even better if the code could check another column, say “Done” and only show RED signals if the date is overdue AND Done=No.

    To continue with my “wish list”: And it would be super fantastic if the first time the RED signal shows up, an e-mail would be sent to a specific person

    Thanks again!
    /Göran Husman
    SharePoint MVP Sweden

  4. Thanks for a great script!!

    Is there someway I could also evaluate a status column. What I would like to have is some means to only display a colour when the status is set to either “completed”, “in-progress” etc. How would I add this evaluation to the existing script?

    Thanks & Regards,
    Mark.

  5. I need to check other fields in the list also along with date check, before I can decide on the color.
    How can I do that. I have a % completion fileld that needs to be checked.

    Can you please help me?
    Thanks

Comments are closed.