[LWC] Date Parsing and ICU Formats

[H9FFDC]

Hi,

We have an encountered an issue with Date parsing when using standard ICU date formats.

Salesforce allow you to access Internationalization properties which are localised with respect to the locale of the current user (a user level setting rather than a device setting). We are using this with the LocaleManager to set the localised parsers on DateHelper. https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.create_i18n

As an example, we can do the following: import L from '@salesforce/i18n/dateTime.shortDateFormat'; and then use this value to localize the DateHelper L parser.

Salesforce are using ICU Date Formats - so for a user with a locale of English (United States), the value of L above is M/d/yyyy. However, this date format is incompatible with DateHelper.parse(). I've attached a screenshot showing the outcome if this format is used.

Is there a reason why the accepted tokens to the DateHelper.parse() method differ from the standard ICU formats? Is there any work planned to support the ICU formats? If not, I suppose we will need to apply an additional conversion between the ICU format and the accepted format.

Many thanks!

[gbrdhvndi]

Given that ICU and Moment.js have pretty much opposite views on what a lower case d and an upper case D means in the format string, I believe we'd have to apply some transformations to the values we get from Salesforce before passing them into the Bryntum locale manager.

For reference, ICU docs for Java:
https://unicode-org.github.io/icu-docs/apidoc/released/icu4j/com/ibm/icu/text/SimpleDateFormat.html

d = day of the month
D = day of the year

[Maxim Gorkovsky]

Hi,
I'm afraid we do not support ICU format. Please see this doc article for reference on parsing/formatting: https://bryntum.com/docs/gantt/#Core/helper/DateHelper
For instance, lower d is a weekday, and DD is a day in a month with leading zeros.

What you can do:

1. Use default Date constructor
   new Date('07/03/2020') // Fri Jul 03 2020 00:00:00

2. Use converter for a date field:
   MyModel extends TaskModel {
     static get fields() {
       // or any other date converter, e.g. one that salesforce provides
       return [{ name : 'startDate', type : 'date', convert : v => new Date(v) }]
     }
   }

3. Create a map which would translate one format to another, smth like
   map = {
    'd' : 'DD',
    'D' : 'DDD',
    'M' : 'MM', ...
   }

[gbrdhvndi]

The issue my colleague has described is related specifically to parsing dates from strings, for example in date pickers.

This is our locale module:

import locale from '@salesforce/i18n/locale';
import weekStartDay from '@salesforce/i18n/firstDayOfWeek';
import L from '@salesforce/i18n/dateTime.shortDateFormat';
import LT from '@salesforce/i18n/dateTime.shortTimeFormat';
import currency from '@salesforce/i18n/currency';
import labels from './labels';

const localeName = 'Sf';
const localeDesc = 'Salesforce';

export default {
    ...labels,
    localeName,
    localeDesc,
    NumberFormat: {
        locale, // en-US, en-GB, ...
        currency, // USD, GBP, ...
    },
    DateHelper: {
        locale, // en-US, en-GB, ...
        weekStartDay, // 1, 2, ...
        parsers: { L, LT }, // <--<< This is where the problem is.
    },
};

In the en-GB locale, L="dd/MM/yyyy" and LT="HH:mm".
In the en-US locale, L="M/d/yyyy" and LT="h:mm a".

So it seems we need to convert the L format into uppercase before passing into the LocaleManager as lowercase "d" means something different and lowercase "y" isn't supported at all.

Would this be a valid assessment?

[Maxim Gorkovsky]

That sounds correct, converting L format to upper case should do the trick. And LT should remain intact.