{"id":28244,"date":"2021-06-15T11:19:13","date_gmt":"2021-06-15T11:19:13","guid":{"rendered":"https:\/\/www.inogic.com\/blog\/?p=28244"},"modified":"2021-09-01T09:36:28","modified_gmt":"2021-09-01T09:36:28","slug":"how-to-read-and-set-date-format-of-logged-in-user-in-pcf-control","status":"publish","type":"post","link":"https:\/\/www.inogic.com\/blog\/2021\/06\/how-to-read-and-set-date-format-of-logged-in-user-in-pcf-control\/","title":{"rendered":"How to Read and Set Date Format of Logged-in User in PCF Control"},"content":{"rendered":"

Introduction<\/strong><\/h2>\n

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.<\/p>\n

Scenario:<\/h3>\n

Here is my current user settings in Dynamics 365 CRM.<\/p>\n

\"ReadAndSetDateFormat\"<\/a><\/p>\n

As you can see here, the date format are as follows:<\/p>\n

Short date: yyyy\/MM\/dd<\/p>\n

Long date: MMMM,d,yyyy<\/p>\n

In this example, I will be retrieving short date format.<\/p>\n

Example<\/h3>\n

Here is the pop-up window in which I want to retrieve some basic user information including their joining date.<\/p>\n

\"ReadAndSetDateFormat\"<\/a><\/p>\n

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.<\/p>\n

\"ReadAndSetDateFormat\"<\/a><\/p>\n

Get the Date Format<\/strong><\/h3>\n

To get the logged-in user date format settings, I have retrieved dateFormattingInfo from PCF context object as below:<\/p>\n

Context.userSettings.dateFormattingInfo.shortDatePattern. \/\/For Short Date Format.<\/p>\n

Context.userSettings.dateFormattingInfo.longDatePattern. \/\/For Long Date Format.<\/p>\n

Set the date in datepicker control<\/strong><\/h3>\n

To set the retrieved date format to the datepicker control, I have used formatDate property of datepicker control.<\/p>\n

\"ReadAndSetDateFormat\"<\/a><\/p>\n

Here is the function to set the user selected date:<\/p>\n

\"ReadAndSetDateFormat\"<\/a><\/p>\n

Result<\/strong><\/h3>\n

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

\"ReadAndSetDateFormat\"<\/a><\/p>\n

Conclusion<\/strong><\/h2>\n

With the help of Context.userSettings.dateFormattingInfo.shortDatePattern<\/strong>, we can read and set date from logged-in user’s date format.<\/p>\n

\"\"<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

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\u2026 Read More »<\/a><\/span><\/p>\n","protected":false},"author":13,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[11,1929],"tags":[1941,2291,2302,2303],"class_list":["post-28244","post","type-post","status-publish","format-standard","hentry","category-controls","category-pcf","tag-pcf-control","tag-pcf-dataset-control","tag-read-date","tag-set-date"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/28244","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/comments?post=28244"}],"version-history":[{"count":0,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/28244\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/media?parent=28244"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/categories?post=28244"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/tags?post=28244"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}