Simplifying Date Formatting In Sharepoint With Javascript

The Problem with Default Date Formatting in SharePoint

SharePoint displays dates using the default format of MM/DD/YYYY. This format may seem unintuitive to users in some regions who are accustomed to seeing dates formatted as DD/MM/YYYY instead. The inconsistency between SharePoint’s date format and a user’s expectations can cause confusion when interpreting dates shown in lists, libraries, and site content.

Additionally, the full date format takes up considerable screen real estate. When dates are shown in columns within SharePoint lists, using the long MM/DD/YYYY format restricts the amount of other metadata that can be displayed within the same column space.

Thankfully, SharePoint allows site owners and users to customize how dates are rendered through client-side formatting options such as JavaScript. By leveraging these formatting capabilities, users can tailor dates to match regional date formats, improve readability of dates, and optimize date strings to save space.

Table of Contents

Using JavaScript to Customize Date Formatting

JavaScript injection allows SharePoint site owners to apply custom date formatting without having to change system or regional settings that control default date rendering. Through JavaScript, dates can be formatted to show only required date components, display dates arranged to user preferences, and even conditionally show different formats based on specific needs.

Sample Code for Common Date Customizations

Some examples of common date formatting customizations through JavaScript include:

Short Date Format – MM/DD/YY

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "txtContent": "= @currentField",
  "attributes": {
    "class": "=if(@currentField == '', 'not-set', '')"
  }  
}

Long Date Format with Day Name – DAY_NAME, Month Date, Year

  
{
 "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "txtContent": "[email protected]('@MMM DD, YYYY')",
  "attributes": {
    "class": "=if(@currentField == '', 'not-set', '')"
  }
}

Time Format – HH:MM AM/PM

{
 "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "txtContent": "[email protected]('@h:mm TT')",
  "attributes": {
     "class": "=if(@currentField == '', 'not-set', '')"
  }
}

These samples demonstrate a few ways date formatting can be customized and optimized for specific needs using JavaScript’s built-in date formatting syntax. Further formatting options are available through the Microsoft Fluent UI DatePicker component.

Step-by-Step Guide to Implement JavaScript Date Formatting

The steps to apply custom JavaScript date formatting in SharePoint are:

Navigate to the List or Library where dates are displayed
Go to List or Library settings and select “Format this column” under “Column Formatting”
Choose the Date/Time field you want to format
Toggle to “Custom formatting” and add the JSON script
The updated formatting will now apply automatically

This capability does require site owners to have appropriate permissions to customize List and Library settings. But once configured, any user viewing the SharePoint list or library will see the updated date formats applied.

Formatting Dates Stored in SharePoint Columns

In addition to formatting dates for display purposes, JavaScript can also be used to set default value formats for date values stored within SharePoint columns. The main use case for this is enforcing a consistent date format when values are entered manually or validated through Business Logic flows.

Sample Code for Formatting Dates in Columns

Sample code for ensuring consistent formats for stored SharePoint date column values includes:

Enforce Stored Date Format in Text Column

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "txtContent": "=@currentField",
  "attributes": {
    "class": "=if(and(not(isblank(@currentField)),not(indexof(@currentField,'YYYY-MM-DD')) > -1), concat('badformat'), '')"
  }
}

This script flags any text-based date that is not in an expected YYYY-MM-DD format. Site owners can then choose to validate on entry with other mechanisms like Power Automate flows.

Normalize Date Storage Format in Date/Time Column

  
{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
  "elmType": "div", 
  "txtContent": "=text(@currentField,'YYYY-MM-DD')",
  "mode": "dateformat" 
}

By setting the mode property to “dateformat”, this script converts any date/time column value to a text string in the standardized YYYY-MM-DD format instead of storing as a native DateTime object. This normalization can simplify comparisons and calculations that rely on consistent date text strings.

So in addition to display formatting, JavaScript can also assist with enforcing standardized date formats for SharePoint columns storing date values as text or native DateTime objects.

Considerations When Changing Date Formats

When customizing date formatting in SharePoint, site owners should keep some best practices in mind:

Choose Intuitive Regional Formats

Aim to use familiar date formats users expect based on business location and regional norms. For example, in Europe display DD/MM/YYYY instead of MM/DD/YYYY.

Consistency Within Site

Use the same date format convention across lists and libraries within a SharePoint site for usability, unless specific list requirements call for an exception.

Accessibility

Custom date formats still need to meet contrast and font size requirements to be perceivable by users with visibility impairments.

Localization

Consider right-to-left languages when arranging date components like day, month and year. Also, use proper ordinal suffixes like “th” and “st” for the day component.

Potential Performance Impact

Complex formatting logic can impact list and library performance. Lightweight text manipulation is ideal. Apply custom JavaScript selectively only where formatting needs call for it.

By keeping these factors in mind, site owners can optimize both utility and performance when implementing JavaScript formatting.

Additional Date Formatting Options in SharePoint

While client-side JavaScript injection provides the greatest flexibility for customizing SharePoint date displays, site owners can also use the following platforms to alter default date renderings:

Regional Settings – Site and user regional options can enforce time zones, order of date components, and delimiter symbols.
Column Formatting – Using JSON and conditional logic, default renders of dates stored in columns can be adjusted.
Site Theming – Through composed looks and alternate CSS, the SharePoint UI can be overridden to display customized date styling.

Compared to JavaScript column formatting, these approaches apply changes on a site-wide level rather than allowing scoped modifications to individual list columns. In most cases, JavaScript provides the right balance of targeting specific fields while using light logic. However, the other options can serve as backups if further customization is still needed.