A common request for tasks lists is to display the number of days left until the due date. Generally speaking, there’s a need among business users to include today’s date in formulas.

In a previous post I have analyzed a method – the “Today” trick – and shown its limits. In this post I am going to describe a different method, using the Data View Web Part and JavaScript.

The method

The tricky parts are to get today’s date and translate dates into durations (number of days).
For my solution I have chosen to use JavaScript, which provides today’s date through the Date object, and a getTime() method that returns the number of milliseconds since midnight of January 1, 1970.
In SharePoint, dates are stored in number of days, the origin being the end of the year 1899.

Using January 1, 1970 as the origin, I am going to calculate two durations:
- DaysToDue (in SharePoint): number of days until Due Date
DaysToDue = [Due Date] – DATE(1970,1,1)
- DaysToToday: number of days until now
DaysToToday = (Today’s date).getTime() / 86400000
(86400000 is the number of milliseconds in one day)

We can then get the number of days left:
TodayToDue = DaysToDue – DaysToToday

Implementation

If you are not familiar with the Data View Web Part, I recommend that you first read the tutorials mentioned in my previous post.

1/ create your tasks list and add a couple tasks with their due date. Filter the list to only keep non completed tasks, and sort by due date (ascending order).

2/ Add a new column called “Days Left”:
- Select: Settings > Create Column
- Create a column called “Days Left”, with type set as ”Calculated (calculation based on other columns)”
- Enter the formula: =IF([Due Date]=0,”No due date”,[Due Date]-DATE(1970,1,1))
- Click OK

3/ create a Web Part page (Site Settings > Create > Web Part page) and insert your tasks view, including the [Days Left] column. You should get something like this:

4/ open the page in SPD in design mode, right-click on the tasks list and choose “convert to XSLT data view” (see my previous post for more details):

5/ the result, after conversion:

6/ switch to code mode and search for these lines:

<!--Days_x0020_Left-->
<!--Days Left-->
<TD Class="{$IDA0WZ5B}"><xsl:value-of disable-output-escaping="yes" select="ddwrt:AutoNewLine(string(@Days_x0020_Left))" /></TD>

7/ in the above lines, replace this tag:

<xsl:value-of disable-output-escaping="yes" select="ddwrt:AutoNewLine(string(@Days_x0020_Left))" />

With:

<DIV align = "right">
<xsl:variable name="StrDaysLeft" select="@Days_x0020_Left" />
<xsl:variable name="NbDaysLeft" select="number(translate(@Days_x0020_Left,',',''))" />
<script type="text/javascript">
var d = new Date();
var StrDaysToDue = '<xsl:value-of disable-output-escaping="no" select="$StrDaysLeft" />';
var DaysToDue = '<xsl:value-of disable-output-escaping="no" select="$NbDaysLeft" />';
var DaysToToday = (d.getTime() / 86400000);
if (StrDaysToDue == "No due date")
{
document.write (StrDaysToDue);
}
else
{
var NumberOfDaysLeft = Math.round((DaysToDue - DaysToToday)*10)/10;
if (NumberOfDaysLeft >= 0)
{
document.write (NumberOfDaysLeft);
}
else
{
document.write ("OVERDUE! " + NumberOfDaysLeft);
}
}
</script>
</DIV>

8/ Save your changes and see the result in your browser:

A couple notes

- The steps in SharePoint Designer are not detailed as it is not the main purpose of this post. Again, see my previous article for details.
- Your own formulas may differ, depending on your conventions (e.g. due date at midday vs. midnight) and your SharePoint date settings (date only vs. date and time).
- The method just renders the day count on the screen, you cannot use it for sorting or filtering purposes. For sorting, use the [Due Date] column. For filtering, use the default [Today] available in SharePoint filters. Set up the sorting and filtering rules BEFORE doing the XSLT conversion in SPD.
- The value in the [Days Left] column is correct only on your DVWP. In the other views of your tasks list, SharePoint will use the original formula (= [Due Date] – DATE(1970,1,1)). I reused the [Days Left] column to simplify the tutorial, but a better way would be to create a separate column in SPD.
- The reference for today is the user’s local time. If you need the server’s local time instead, SharePoint and the ddwrt namespace provide some functions that will return today’s date. You’ll find a good reference here (written for SharePoint 2003).

A question for the SharePoint Designer experts

I am having a hard time formatting dates and durations in SharePoint Designer. In this example, I was unable to remove the 1000 separator (hence the “translate” trick in my script). Insights on this issue are appreciated!