Local timezone in form when document has UTC dates

[markus-agile-fog]

Hi,

I have problems to find a good solution to display the UTC dates from my document in local timezone.

Since I noticed that my fields and expressions are showing my plain UTC dates instead of a localized timezone I wonder how to solve the problem is there any recommendation?

What I did so far is using a custom converter like explained in getA12.com/docs - Client - Dataformats or in getA12.com/docs - Form Engine - Custom Converter.

But this seems odd:

// ... inside the converter creation function
const formatValue: Converter["formatValue"] = (path, value, options) => {
            if (value instanceof Date) {
                 // when value is a Date I create a copy - value itself at that moment has the desired timezone
                const timezonedDate = new Date(value);
                // and duplicate the timezone offset
                timezonedDate.setMinutes(timezonedDate.getMinutes() - timezonedDate.getTimezoneOffset());
                // the defaultConverter strips of the regular timezone offset
                // return then is the date in the desired timezone
                return defaultConv.formatValue(path, timezonedDate, options);
            }
            return defaultConv.formatValue(path, value, options);
        };
// ... rest of the converter 

why does the default converter strip the timezone offset of the Date value?

Other thing I found was that timezone can be handed over to widgets, but I guess changing all widgets in the widget map is not the suitable solution for that..even since it is probably not possible to adapt timezone for expressions in there.

Is there any recommendation how to display dates in correct timezone?

[chris-long-packet]

Hi,

like you already tried, I would also say that implementing your own converter is the way to go here (you get some data from the FE and want to customize how its formatted).

Regarding the actual formatting logic of the defaultConverter, I dont see any special handling for date values. For any kind of field (with the exception of enumerables), the form engine code simply calls the kernel API for the corresponding meta field, e.g.

const uiValue = metaField.convertFromBasicType(value, dataFormats, vkResult, locale);

I would assume someone from the kernel team can clarify about the behavior you observed (regarding stripping of timezone offsets)

[ahmad-warm-vale]

I think this is achievable by using toLocaleDateString method.

const locale = useSelector(LocaleSelectors.locale());

const localeString = `${locale.language}-${locale.country}`;

const options: Intl.DateTimeFormatOptions = {
		year: "numeric",
		month: "numeric",
		day: "numeric",
		hour: "numeric",
		minute: "numeric"
	};

const formatValue=desiredDate?.toLocaleDateString(localeString, options);

[markus-agile-fog]

thanks for you answers

@chris-long-packet
thanks for the insights. so when i looked up the underlying methods used in the kernel they take the timezone from the model (which is UTC).

so saying that it seems there is a missing timezone concept for displaying date values in ui.

@ahmad-warm-vale

const formatValue=desiredDate?.toLocaleDateString(localeString, options)

thx but I like to avoid using the objects method for that. This will not return an date string in the defaultDataFormats.dateTimeFormat given by a12 defaults.

So for the moment I guess I will stick to my solution since this seems the easiest workaround for the timezone problem when displaying dates in a12 form engine.

[luu-far-shell]

Hi, in StBK project we also face the same problem with DateTime value with Local timezone. Here are how we implement, it looks similar to your solution

1. Expectation:

• Store date times in UTC in the database, and Backend code (this UTC value will be used for logging, etc.).
• Convert date times to user’s local timezone (Europe/Berlin) using Frontend code.
• Convert date times to user’s local timezone (Europe/Berlin) in PDF generation.

2. Design solution:

• Unify time zone for Document Model and Server System Default time zone to UTC.
• For Print, we can provide the timezone when creating the PrintJob, it is available from 2023.06 (A12-14802)
• For FE we provide a converter for Form Engine, Overview Engine, and outside A12 context to parse/format date time
  
  

We also pass the timezone to DateTimePicker

export const CustomDateTimePicker = (props: DateTimePickerProps) => {
	return <DefaultWidgetMap.DateTimePicker {...props} timezone={getTimezone()} />;
};

export function getTimezone() {
	return Intl.DateTimeFormat().resolvedOptions().timeZone;
}

[markus-agile-fog]

thanks @luu-far-shell , the timezone for the widgets i missed out at a first but recognized when i saw the pickers selection was not in correct timezone. what i somehow missed yet is how to set the inital displayed time inside the pickers dialog when no value is given… but at least this is something my project can live with.

So summarized what I did (on my A12 2022.06 project):

1. Create a custom converter that implements a custom formatValue which will double the timezone offset when value is a JS Date instance and a custom parseValue that removes the timezone offset (this was necessary due to date fields that are manually edited)
2. Add that converter to the createFormEngineMiddlewares configuration in appsetup and my custom form implementation based on a12 clients FormEngineViews.FormEngine
3. Add a timezone to the date/time specific widgets in the Form Engine WidgetMap

I did not change any implementation for overview engine since I did not need any dates in there