Sharepoint Date Field Highlighting Based On Today’S Date

Detecting Today’s Date in SharePoint

Determining the current date is an essential first step for dynamically highlighting SharePoint date fields. SharePoint provides built-in variables and functions to obtain today’s date for use in comparisons and calculations.

Using the Current Date variable in SharePoint Designer workflows

SharePoint Designer workflows allow referencing the current date by using the variable Current Date. This variable dynamically updates each day to the current date. Workflows can compare date fields to Current Date to determine if they are in the past, today, or future.

For example, an approval workflow on a list with a Due Date column could check if the Due Date is before Current Date to determine if an overdue approval is needed. By basing logic on Current Date instead of a static date, workflows remain accurate as today’s date changes.

Comparing date fields to the Current Date in calculated columns

In SharePoint calculated columns, the TODAY and NOW functions return the current date and time. Calculated columns can compare a date field to TODAY to calculate a field indicating the number of days until or days past today’s date.

For instance, a Days Until Due calculated column could subtract a Due Date from TODAY to show upcoming deadlines. As the current date progresses, the calculated difference remains up-to-date.

Conditional Formatting Based on Date

SharePoint view formatting with JSON rules provides a straightforward way to highlight date fields based on conditions. The same date comparisons used in workflows and calculated columns can drive dynamic color formatting.

Using JSON formatting to highlight dates

JSON-based view formatting defines rules with formula conditions that trigger applying CSS classes. Formulas can reference the current date and check if date fields are before, equal to, or after that date.

For example, a rule could compare if a Due Date field is less than TODAY to check if it is past due. If true, a class like “PastDueHighlight” is added to apply red formatting to overdue items.

Example JSON for highlighting past, current, and future dates

Here is sample JSON code for view formatting rules to highlight date fields:

{
  "schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "regions": {
    "DueDate": {
      "formatter": {
        "intrinsic": {
          "classNames": {
            "class1": {
              "operator": "?",
              "operands": [
                {
                  "operator": "<",
                  "operands": [
                    "@currentField",
                    "@now"
                  ]
                },
                "PastDue"
              ]
            },
            "class2": {
              "operator": "?",
              "operands": [
                {
                  "operator": "==",
                  "operands": [
                    "@currentField",
                    "@now"
                  ]                  
                },
                "DueToday" 
              ]
            },
            "class3": {
              "operator": "?",
              "operands": [
                {
                  "operator": ">",
                  "operands": [
                    "@currentField",
                    "@now"                    
                  ]                  
                },
                "UpcomingDue"
              ]
            }
          }
        }
      }
    }
  }
}  

This JSON defines three rules for separate classes to highlight past, current, and future due dates.

Applying Highlighting Rules with JavaScript

While view formatting handles simple date comparisons, more complex conditional highlighting logic can run through custom JavaScript.

Get date field values with REST API or jQuery

JavaScript embedded on pages can retrieve due dates and other field values from list items through the SharePoint REST API or jQuery.

• SPHttpClient and the SharePoint REST API
• jQuery AJAX requests
• Accessing item properties from rendered field markup

Retrieved field values enable evaluating custom conditions in JavaScript to control highlighting.

Add conditional classes with JavaScript

Based on comparisons in JavaScript, code can add and remove CSS classes to attach styling. For example, checking multiple date ranges could apply classes like:

• PastDueWarning
• DueSoonWarning
• UpcomingDue

Classes can target specific fields by traversing the DOM or using field IDs known from rendering.

Style classes to highlight dates

The added CSS classes define visual formatting like background colors to highlight dates. Example styling rules:

.PastDueWarning {
  background-color: #ff3333; 
}

.DueSoonWarning {
  background-color: #ffff66;
}  

.UpcomingDue {
  background-color: #99ff99;
}

Attaching semantic class names allows changing styles through CSS without altering JavaScript. Formatting stays separate from conditional logic.

Automating Daily Highlight Updates

As today’s date changes, highlight formatting requires updates to remain accurate. Automating updates ensures formatting consistency without manual intervention.

Set up a daily workflow to update highlighting

Scheduled workflows activated daily re-run highlighting logic systemwide on a list or across site content. Workflows based on the Current Date variable determine if additional items are now upcoming, due soon, or past due each day.

Example architecture:

1. A site workflow runs a JavaScript action that applies highlighting
2. The workflow is scheduled to execute daily
3. Formatting updates overnight for the new current date

Use retention policies to automatically remove old highlights

Retention policies can delete items or run actions such as removing highlighting classes after a due date passes. This helps clean up rows no longer needing date formatting. Managing removal of old highlights avoids stale colors on the page.