Javascript Solutions For Formatting Sharepoint Dates In Views

The Problem of Inconsistent Date Formats

Inconsistent date formats in SharePoint views can cause major headaches for users. Without proper formatting, dates display in the default SharePoint generalized datetime format like “1/27/2023 12:00 AM”. This disjointed mix of US and international formats is confusing and inefficient.

Some examples of date formatting issues users commonly face include:

• Important timeline or calendar views show useless default datetimes.
• Date comparisons in tables and calendars are difficult when each entry uses a different format.
• Regional date formats like DD/MM/YYYY are not properly displayed for all users.
• Date ranges get broken up into start and end fields that don’t logically fit together.

Formatting dates consistently in views allows users to quickly scan and compare dates, plan schedules from calendars, and avoid data entry errors. Unfortunately SharePoint’s out-of-the-box view formatting options fall short when trying to wrangle dates into a usable display.

Using JavaScript to Format Dates

JavaScript injection offers a client-side solution for consistently formatting dates in SharePoint views. Unlike server-side options like XSLT, users don’t need access permissions to add JavaScript formatting to list views. Benefits include:

• Format dates dynamically on page load without affecting the stored SharePoint data.
• Use familiar JavaScript date formatting syntax like .toLocaleDateString() for easy implementation.
• Avoid postbacks and page reloads to improve performance.
• Grant editors without server access the ability to beautify dates in views.

Some example JavaScript functions that format a date field into more user-friendly displays are:

// Format date as "MM/DD/YYYY"
function formatDate(inputDate) {
  return new Date(inputDate).toLocaleDateString(); 
}

// Format datetime relative to "today"
function formatDatetime(inputDatetime) {
  const daysAgo = moment(inputDatetime).fromNow(); 
  return daysAgo;
}

JavaScript dates use standard syntax like .getFullYear() and .toLocaleTimeString(). Some useful formatting includes:

• Multilingual support via .toLocaleDateString() and locale options.
• .getDay() to return the weekday number.
• Relative timestamps like “30 minutes ago” using library Moment.js.
• Custom formats like “MMM Do, YYYY” using .toLocaleDateString().

Customizing Date Formats in View Web Parts

Follow these steps to inject custom JavaScript date formats into SharePoint views:

1. Edit the list view web part.
2. Expand the “Miscellaneous” group in the web part tool pane.
3. Insert formatting functions into the “JSLink” box to override field rendering.
4. Don’t forget to reference column names like “Effective_x0020_Date”.
5. For calendar views, customize the “Recurrence Field” setting instead.

Additionally, verify that:

• The date field type is set properly in List Settings.
• Your view has the date column included.
• “Use client-side rendering” in Advanced View Settings is enabled.

Some common issues faced:

• JSLink code not activating – ensure client-side rendering is on in both View and Site Settings.
• Infinitely loading view – check console for JS errors breaking page load.
• Weird date output – match input and output date formats correctly.

Common Use Cases and Solutions

Here are some key date formatting scenarios in SharePoint views to tackle with custom JavaScript:

Formatting Date Columns in Calendars

Calendar views need clearly formatted datetimes with fixed year, time, and timezone:

function formatCalendarDates(inputDate) {
  return inputDate.toLocaleString('en-US', {
    year: 'numeric', 
    month: 'short',
    day: 'numeric',
    hour: '2-digit',
    minute:'2-digit',
    timeZone:'UTC'
  });
}

Displaying Friendly DateTimes in Summaries

Overview grids should show readable datetimes relative to today, like “3 days ago”:

function formatSummaryDatetimes(inputDateTime) {
  return moment(inputDateTime).fromNow(); 
}  

Handling Date Ranges and Comparisons

Ranges should display start and end together, not as separate fields:

  
function formatDateRanges(startDate, endDate) {
  return startDate.toLocaleDateString() + " - " + endDate.toLocaleDateString(); 
}

For comparisons, align formats:

function formatCompareDates(inputDate) {
   return new Date(inputDate).toISOString().slice(0,10);  
}

Considerations and Alternatives

Before implementing JavaScript formatting, note limitations like:

• Complex conditional logic is difficult to write reliably.
• Page performance may suffer with 100+ fields formatted on very large lists.
• Loses effectiveness when exports don’t include formatting.

Some alternatives to keep in mind are:

• Server formatting with XSL in Content Query Web Parts for high-performance situations.
• Developer extensions like column and field type formatting.
• Third-party list formatting tools and web parts.