Datetime Zone Issue In Liquid - Dynamics 365 Portal

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

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.
 
Datetime Zone Issue In Liquid - Dynamics 365 Portals
 
But in the portal, it was displaying the date and time like the following.
 
Datetime Zone Issue In Liquid - Dynamics 365 Portals
 
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.
  1. {% 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.

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

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

  1. <script type="text/javascript">  
  2. $(document).ready(function()  
  3. {   
  4. //set local  
  5. moment.locale('en-AU');  
  6.    
  7. //format date from UTC to local  
  8. $('#starttime')[0].innerHTML=moment.utc($('#starttime')[0].innerHTML).local().format('dddd, Do MMM YYYY h:mm A');  
  9. $('#endtime')[0].innerHTML=moment.utc($('#endtime')[0].innerHTML).local().format('dddd, Do MMM YYYY h:mm A');  
  10.    
  11. });  
  12. </script>  

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

Datetime Zone Issue In Liquid - Dynamics 365 Portals 
I hope it will help someone!!