Sharepoint List: Days Elapsed or Countdown

SharePoint List: How to Display Days Elapsed or Countdown 

Problem:Have you thought about introducing a countdown or even days elapsed as a feature in a sharepoint list?

Solution:Well i have a solution for you using javascript. It does get a little involved with code but very easy to implement.

4 Step Implementation:

Step 1: Create the list in sharepoint and name it what you like
Add two columns:
Column 'Today" type = Date and Time
Column 'Days Elapsed' type = calculated

Step 2: Under list settings, go to column you have just added called Days Elapsed and enter the following formula: =ROUND(Today-Created,0)&" days" --> Output Data Type as a Single Line of Text.

Step 3: Some code --> Copy the code below and paste it into a nodepad, go through the code and change the name of your list: Look for LIST NAME, thats where you will change the name to your list name and also change the column name for "Today" if you named it different. Save this file to your drive and name it what you like as a .txt file. Now go to your share point site and upload this file to any library. Once you have uploaded your file, right click it and select copy shortcut.

Step 4: Implementation--> Go to your list, select Site Actions (top left corner), select Edit Page, then on the page, select Add a Web Part. Add a web part called Content Editor. Select the web part you have just added to your page and on the left side click the arrow pointing down, then select Edit Web Part. On the left, you will have an edit box, paste the location of your code file in Content Link text area and under Layout select hidden. Click Ok.

Conclusion: My implementation works at any time the page is loaded the script will run. It will take today's date (javascript object) and update it in the sharepoint list column called today. Now, that javascript has updated in the list, we can use sharepoint to calculated field to get the number of days elapsed. This could be similarly done to do a count down.

Please comment and share if this helped you.

Citiation: Update an item in sharepoint

--------------------------------------------Code below-------------------------------------------------------
<script type="text/javascript">

var myListItemCollection;
var myListcontext;
var todayColumn = "Today"; //change this if you have named your column differently


//Delays function from running until sp.js loads
$(document).ready(function() {
    ExecuteOrDelayUntilScriptLoaded(getMyListItems, "sp.js");
});

function getMyListItems()
{
try
{
myListcontext =  new SP.ClientContext.get_current();
var web = myListcontext.get_web();
var myList = web.get_lists().getByTitle('[LIST NAME]');
var camlQuery = new SP.CamlQuery();
//this query is pulling all items in this list, if you want to pull specific items, please change query
camlQuery.set_viewXml("<view><query></Query></View>");

this.myListItemCollection = myList.getItems(camlQuery);
myListcontext.load(myListItemCollection);

myListcontext.executeQueryAsync(updateItems,failureMethod);
}
catch(exc)
{ console.log(exc.message);}
}
function updateItems(sender, args)
{
try
{
var listItemEnumerator = myListItemCollection.getEnumerator();
while(listItemEnumerator.moveNext())
{
var myListItem = listItemEnumerator.get_current();

var date = new Date();
var day = date.getDate();
day = day + 1;
var month = date.getMonth();
var year = date.getFullYear();
var fulldate = month+1 +'/'+ day + '/' + year;
//console.log(fulldate);

myListItem.set_item(todayColumn , fulldate);
myListItem.update();
}
myListcontext.executeQueryAsync(ItemsUpdated, failureMethod);
}
catch (exc)
{ alert(exc.message);}
}
function ItemsUpdated(sender, args)
{
console.log('Items updated successfully');
}
function failureMethod(sender, args)
{
alert ('Request failed' + args.get_message() + '\n' + args.get_stackTrace());
}
</script>

-----------------------------------------------------------------------------------------