Datetime Zone Issue In Liquid - Dynamics 365 Portal

Introduction

This article is about the date time format and zone issue in Dynamics 365 Portal. Dynamics 365 CE stores date time in UTC format in CRM DB and when you display the date field on Dynamics 365 Portal, it will display the same date which sometimes leads to an incorrect date and time. If you are facing the same issue, this article can help you to fix it.

Details

When we print the date and time in the portal pages using Liquid, it is printed in the UTC format only. For example - while printing the booking details on the portal page, I noticed that it was displaying date and time with a one day difference from CRM UI. As you can see in the following screen, the date and time in CRM UI is shown.

 

 

But in the portal, it was displaying the date and time like the following.

 

 

To overcome this issue, we can use JS library like Moment.js which is included in the portal. But the real question is how to use these libraries. When I tried to look if someone was already using it to solve this issue, I found a hack to add an offset to the date and time field to display date, so for example, if we will use the following, it may display the correct date and time.

{% assign start = workorderresult['booking.starttime'] | date_add_hours: 10 %}

But this will be an issue for regions with daylight savings time and it can start displaying the wrong date and time when the time changes. I tried different options to make it work without the offset value to avoid this date time issue.  To overcome this issue I displayed date time field under an html table like following.

<td id="starttime" style="font-weight:bold"> {{start}} </td>

and after that I used Moment.js like the following to solve the daylight issue.

<script type="text/javascript">
$(document).ready(function()
{
//set local
moment.locale('en-AU');

//format date from UTC to local
$('#starttime')[0].innerHTML=moment.utc($('#starttime')[0].innerHTML).local().format('dddd, Do MMM YYYY h:mm A');
$('#endtime')[0].innerHTML=moment.utc($('#endtime')[0].innerHTML).local().format('dddd, Do MMM YYYY h:mm A');

});
</script>

After the above changes, I was able to see the date and time correctly,

 

I hope it will help someone!!