How To Display Value Of Date Time Column In SPFx Web Part

Introduction

As we already know, SharePoint shows the value of the date-time column in the list/libraries based on the time zone selected in your SharePoint site collection and the time zone user has selected in their user profile.

If you don’t know, please refer to this article.

So, we cannot directly display the date-time column’s value returned by Rest API. Because Rest API will return date time in the UTC time zone.

So, display date time in the UTC time zone to users in custom web parts will not make sense. Because if the user checks in the list then it will display a different date-time.

In this article, we will learn how we should display the value of the date-time column in the custom SPFx web part.

Date time conversion

As in the result of Rest API, we will get date time in UTC time zone we need to convert UTC date-time in the time zone of either site collection’s time zone or user profile’s time zone.

The most useful library to work with dates is momentjs.

Moment is a popular JavaScript library for working with dates. Moment makes it easy to add, subtract, and format dates, but, by itself, Moment is limited to working with two timezones: UTC and whatever the JavaScript runtime locale's timezone is. The moment-timezone library provides the core Moment API, plus support for IANA timezones.

So, to convert date-time into a different time zone, the moment will understand the IANA time zone.

The timezone that SharePoint returns is different from the IANA time zone. So we need to find a mapping for each SharePoint’s time zone with the IANA time zone.

You can find this mapping from Github. Here is the link to it,

https://gist.github.com/mj1856/9542228

Now we need to get the time zone of the currently logged-in user’s user profile and if it is blank then we need to get the time zone selected in regional settings of the site collection.

How to get time zone selected of currently logged in user’s profile

You can get the time zone of the currently logged-in user profile from the current context.

Specify property in props.ts file of your web part,

export interface IGetEventsProps {
description: string;
customContext: any;
}

Now go to the web part’s .ts file and assign value to the property as below,

public render(): void {
const element: React.ReactElement<IEventsProps > = React.createElement(
Events,
{
description: this.properties.description,
customContext : this.context
}
);
ReactDom.render(element, this.domElement);
}

Now in the web part’s .tsx file, we can get the time zone from context as below code,

var currentCtx: any = this.props.customContext.pageContext.legacyPageContext;
var userProfileTimezone = currentCtx.userTimeZoneData;

If the user has selected a time zone in their profile, then it will return the selected time zone in the userProfileTimezone variable else it will return a blank.

We can also use Rest API to get the time zone of the currently logged-in user.

Site collection URL + "/_api/SP.UserProfiles.PeopleManager/GetMyProperties"

Above API will return all properties, we can get timezone from SPS-Timezone property.

How to get time zone selected in regional settings of a site collection

We can get the selected time zone in regional settings of the site collection using custom context property which we defined above.

Below is the code to get the selected time zone,

var siteTimezone = currentCtx.webTimeZoneData;
siteTimezone = siteTimezone.Description;

It will return time zone of regional settings of site collection in siteTimezone variable.

We can also use Rest API to get the time zone of the current site collection.

Site collection URL + "/_api/web/RegionalSettings/TimeZone"

Convert UTC date-time value in the specific time zone

As we discussed above that moment will convert date time in another time zone through the IANA time zone string.

So, we need mapping for the IANA time zone string with the SharePoint time zone string. For this, we can either specify this mapping in code by creating an array variable or we can create a separate list for this mapping.

Here I will prefer to creating a separate SharePoint list, so in the future, if the IANA time zone string is updated then we can directly update it into our SharePoint list.

So, from this list, you will find the related IANA time zone using filters in Rest API, and using this IANA time zone we can convert date-time into a different time zone.

Now to convert date time to different time zone, we need to import the moment-timezone library as below,

import moment from 'moment-timezone';

Now we can convert to the different time zone as below:

moment.tz(date, "America/Los_Angeles").toDate();

Here date is a variable that has the date-time return by SharePoint Rest API and America/Los_Angeles is the IANA time zone for (UTC-08:00) Pacific Time (US & Canada) SharePoint time zone.

Below is the full code snippet to get the time zone and then date time conversion,

public getSharePointTimeZone() {
this.tz = "";
var currentCtx: any = this.props.customContext.pageContext.legacyPageContext;
var userProfileTimezone = currentCtx.userTimeZoneData;
if (userProfileTimezone != "" && userProfileTimezone != null && userProfileTimezone != undefined) {
userProfileTimezone = userProfileTimezone.Description;
this.getTimeZoneMapping(userProfileTimezone);
}
else if (userProfileTimezone == "" || userProfileTimezone == null) {
var siteTimezone = currentCtx.webTimeZoneData;
siteTimezone = siteTimezone.Description;
this.getTimeZoneMapping(siteTimezone);
}
}
public getTimeZoneMapping(timezone) {
var tzurl = escape(this.props.siteAbsoluteUrl) + "/_api/web/lists/GetByTitle(‘IANA_TimezoneMapping')/items?select=IANATimeZone&$filter=SharePointTimeZone eq ‘” + timezone + ”’";
var self = this;
var tempChecker = false;
this.getRequest(tzurl)
.then((zoneStrResult) => {
if (zoneStrResult.value != undefined || zoneStrResult.value.length > 0) {
zoneStrResult.value.map((item, id) => {
if (single.Title.indexOf(timezone) != -1) {
var IANATimeZone = item.IANATimeZone
}
});
});
}
}

As we see in the above code in the IANATimeZone variable we will get the IANA time zone, using this we need to convert a date-time value in the time zone of user profile or SharePoint site collection.

moment.tz(date, IANATimeZone ).toDate();

In the above line of code, the date will the value which is returned by Rest API.

Conclusion

This is how we can show date-time values in our custom SPFx web parts. Hope this article will be helpful!