Display Date format as YYYY/MM/DD in Constellation 25.1.1 without using custom component

User Experience
1

Hi All,

We need to change the date format from MM/DD/YYYY to YYYY/MM/DD.

Currently, Pega is not supporting changing the date format from UI or through date control.

Now, date format is controlled by User locale. For ex: If we change the operator locale to en_CA, then it will allow us to use YYYY-MM-DD Format.

Related Pega Link: https://support.pega.com/question/change-date-format-mmddyyyy-ddmmyyyy-constellation-views-when-date-field-configured-user?

Want to check if anyone in community is able to find workaround for changing the date format.

2

@krishnamohan Pokala

As you already mentioned; Set the locale in the operator record to the correct one and the user will see it in all places on the UI.

I think Pega here does exactly what you may expect: it respects the users preferences on date and date/time formats. So if a user enters something in EU, most likely the input will be DD-MM-YYYY, and someone reading/changing it in the Canada will see YYYY/MM/DD. Optimal UX for both persona’s.

3

@krishnamohan Pokala If you opt to have a custom date time format, then you can write a custom component extending the standard OOTB DateTime component and add a new option in the “Format” select dropdown named “Custom”. On selection of Custom option, provide a text box to enter a custom format.

Custom Date Time Component.jpg
Custom Date Time Component.jpg2930×764 103 KB

Editable

Editable.png
Editable.png2110×204 33.7 KB

Readonly

Readonly.jpg
Readonly.jpg1274×458 73.5 KB

This works for both editable and read-only mode. Please note that this option is only suggested where you have very specific places in the application where you need custom format. To have this component used throughout the application, a developer will need to manually enter the specific date format multiple times in static manner reducing the reusability. To make it format setup in a generic fashion, you might have to employ other ways to refer the date format from DSS using a DPage / (Property Ref+Declare expression).. which is again an overhead.

Link for the POC component code : Smart Date Time Component

A general caution to use custom components only for specific scenarios where you don’t have OOTB feature and you are ensuring to follow the accessibility, security and UI guidelines during component implementation to make it PROD ready.

Happy exploration!!!

Thanks

JC