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[i].innerHTML.indexOf(LeadInTextBeforeDate) == 0) { var sepDate = arr[i].innerHTML.substring(LeadInTextBeforeDate.length + 1).split(splitChar,3); var m = sepDate[OrderMonth - 1]; var d = sepDate[OrderDay - 1]; var y = sepDate[OrderYear - 1]; // 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[i].innerHTML = "<DIV title='" + MouseOverBeforeDaysCount + DueByDays + MouseOverAfterDaysCount + "' style='font-weight:bold; font-size:24px; color:green'>•</DIV>"; } else if(yellowOffsetDate.getTime() >= fieldDate.getTime() && redOffsetDate.getTime() < fieldDate.getTime()){ //alert("yellow"); arr[i].innerHTML = "<DIV title='" + MouseOverBeforeDaysCount + DueByDays + MouseOverAfterDaysCount + "' style='font-weight:bold; font-size:24px; color:yellow'>•</DIV>"; } else if(redOffsetDate.getTime() == fieldDate.getTime()){ //alert("red"); arr[i].innerHTML = "<DIV title='" + MouseOverDueToday + "' style='font-weight:bold; font-size:24px; color:red'>•</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'>•</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[i].innerText || theTDs[i].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[j].innerText || theTBODYTDs[j].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>
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.
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
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
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.
Hi, can’t get this scrip to work with norwegian regional setting. Any ideas? Thanks
Nils
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
Thank you, thank you!