How to Read and Set Date Format of Logged-in User in PCF Control

Introduction

Recently in our PCF control, we got the requirement that when the user selects a date from the calendar control then that date format should be of logged-in user. In this blog, we will check how to achieve the same.

Scenario:

Here is my current user settings in Dynamics 365 CRM.

As you can see here, the date format are as follows:

Short date: yyyy/MM/dd

Long date: MMMM,d,yyyy

In this example, I will be retrieving short date format.

Example

Here is the pop-up window in which I want to retrieve some basic user information including their joining date.

For Joining date field, I have used fabric UI datepicker control. Now when the user selects a date from datepicker like below then I want to set the date in the format of current logged-in user.

Get the Date Format

To get the logged-in user date format settings, I have retrieved dateFormattingInfo from PCF context object as below:

Context.userSettings.dateFormattingInfo.shortDatePattern. //For Short Date Format.

Context.userSettings.dateFormattingInfo.longDatePattern. //For Long Date Format.

Set the date in datepicker control

To set the retrieved date format to the datepicker control, I have used formatDate property of datepicker control.

Here is the function to set the user selected date:

Result

As you can see in the below image, I was able to set the date in logged-in user’s format(yyyy/MM/dd )

Conclusion

With the help of Context.userSettings.dateFormattingInfo.shortDatePattern, we can read and set date from logged-in user’s date format.