13
Views
1
Comments
How to configure Moment JS locales without conflicting with DatePicker web block
Application Type
Reactive
Service Studio Version
11.9.1 (Build 33435)
Platform Version
11.8.2 (Build 15398)

We are using the Reactive OutSystemsUI.DatePicker web block, which uses the private Moment.js script in OutSystemsUI. We want to add additional locales to the same instance of moment the DatePicker uses (e.g. French) so that the Datepicker's formatted date is also localized (month, week, etc), however the script is not available immediately until a screen is loaded that has a Datepicker on it. It also replaces any existing instance of Moment we might have already loaded and configured the first time it loads the OutSystemsUI.Moment script.

Does anyone have any better solutions for localizing the OutSystemsUI.DatePicker with Moment?

For now, I have done a "hack" where on every screen that uses the Datepicker, I set the OnInitialize and OnReady to call an action that replaces the window.moment variable with our own localized Moment instance, and on every DatepickerOnSelect event I re-format the input text with the replaced instance of moment, since the Datepicker saves the OutSystemsUI non-localized instance inside its scope. But this is very hacky and doesn't always work!

mvp_badge
MVP
Rank: #75

Hi Emma,

Sorry for the late response. As a solution for the mentioned use-case, I would suggest the following steps...

Steps to follow:

1) Clone the DatePicker Widget block for customization.

2) Define an additional input parameter called Locale to DatePicker Widget block.

3) In order to support multiple language you can import moment-with-locales.min.js

https://momentjs.com/downloads/moment-with-locales.min.js

4) Include/Add the moment-with-locales.min.js file in the DatePicker Widget block's Required Scripts section as shown below.

5) Within the DatePicker Widget block's OnReady Event Handler flow define a JavaScript node with the below script to set the locale value (pass the block input parameter Locale value)

moment.locale($parameters.Locale);

That's it.. good to go!

See this sample app - DatePicker With Locale

Please refer the attached .oml file

Hope this helps you!


Kind regards,

Benjith Sam

RWALabDatePickerLocale.oml