How is your experience with the OutSystems Community?
19
Views
1
Comments
DatePicker automatically applies timezone conversion to UTC DateTime

Hi,
I am facing an issue with the OutSystems Interaction → DatePicker widget related to DateTime and timezone conversion.

My database stores event STARTS_AT and ENDS_AT values in UTC. When I fetch the event using an Aggregate, the DateTime value is correct.

For example:

Database / Aggregate value:18 Sep 2026 00:00

When I display the Aggregate value using:

FormatDateTime(EventInfo.EventStartDate, "dd MMM yyyy HH:mm")

I get:

18 Sep 2026 00:00

However, when I use the same DateTime in the DatePicker for Edit, the widget applies a timezone conversion automatically.

For example, for an India timezone (UTC+5:30):

Database UTC:       18 Sep 2026 00:00DatePicker Edit:    18 Sep 2026 05:30

Similarly, for a UTC+7 timezone:

Database UTC:       18 Sep 2026 00:00DatePicker Edit:    18 Sep 2026 07:00

2023-12-26 10-35-28
OutSystems Neo
Staff
AI Generated

This behavior is expected: in Reactive apps the DatePicker (and any Date/DateTime input) runs in the browser and always shows the value converted to the client timezone, while the value stored in the DB/aggregate is UTC. Timezone conversion is happening automatically in reactive web app

That’s why:

  • DB / Aggregate: 2026-09-18 00:00 (UTC)
  • Client in IST (UTC+5:30): DatePicker shows 2026-09-18 05:30
  • Client in UTC+7: DatePicker shows 2026-09-18 07:00

What you can do

There’s currently no built‑in switch to “turn off” this client‑timezone conversion in Reactive apps. You have to work around it depending on what you actually want the user to see/edit.


1. If your events are true UTC (global time) and this is correct

If STARTS_AT and ENDS_AT are meant to represent a real point in time (same moment worldwide), then the DatePicker behavior is technically correct: users should see the local time of that UTC instant.

In that case you don’t need to change anything and should keep using the DatePicker as is.


2. If you want to show “raw UTC” in the UI (no conversion)

To avoid the automatic client conversion, don’t bind the DatePicker directly to the DateTime. Instead:

  1. Keep the real UTC DateTime in your entity/aggregate.
  2. Expose a Text variable in the UI with the format you want (e.g. "dd MMM yyyy HH:mm") and bind the DatePicker to that.

Example:

  • Screen variable: EventStartUTC_Text : Text
  • On fetch / OnInitialize:
    EventStartUTC_Text = DateTimeToText(EventInfo.EventStartDate, "yyyy-MM-dd HH:mm")
    
  • Bind DatePicker’s Value to EventStartUTC_Text.
  • On Save:
    EventInfo.EventStartDate = TextToDateTime(EventStartUTC_Text)
    

By passing Text to the client and converting back to DateTime on the server you bypass the automatic timezone conversion. Timezone conversion is happening automatically in reactive web app


3. If your events should be in a location-specific timezone (not client timezone)

Typical scenario: event belongs to a plant/location in some timezone, and you want to show that timezone, regardless of where the user is. [Reactive app] Disable showing dates in client timezone

Approach:

  1. Store event times in UTC in the DB.
  2. On the server, convert UTC → “location timezone” (using offset or your own utility).
  3. Pass that converted value as Text to the client and bind to DatePicker.
  4. On Save, convert “location timezone” back to UTC on the server.

Pattern:

  • Server action:
    LocationDateTime_Text = DateTimeToText(AdjustedLocationDateTime, "yyyy-MM-dd HH:mm")
    
  • Screen binds DatePicker to LocationDateTime_Text.
  • On Save:
    LocationDateTime = TextToDateTime(LocationDateTime_Text)
    EventInfo.EventStartDate = LocationToUTC(LocationDateTime, LocationOffset)
    

Again, the key is: use Text on the client, do timezone math on the server, then convert back.


4. If you only care about date (no time)

In some situations (especially using Flatpickr under OutSystems UI) a DatePicker bound to a Date/DateTime gets shifted by timezone and may even appear as a different day. This is the same root cause: the underlying JS library treats the value as midnight UTC and applies an offset. Date Picker Showing One Day Earlier in PST (Traditional Web App - Timezone Issue)

Common workarounds:

  • Use a Text variable in "yyyy-MM-dd" format for date-only fields.
  • Convert Date ↔ Text on the server (DateToText, TextToDate).

Summary / Recommendation

Because Reactive automatically converts DateTime to client timezone on the browser, you cannot stop the DatePicker from doing that directly. To control what the user sees:

  • Keep UTC DateTime in entities and server logic.
  • Use Text variables for DatePicker binding when you want to avoid or override client timezone conversion.
  • Do timezone conversions (client vs location vs UTC) on the server, and only send the final representation as Text to the client.

If you describe whether your events should be seen in UTC, in user-local time, or in a fixed location timezone, I can outline a specific implementation using your STARTS_AT / ENDS_AT flow.

This answer was AI-generated. Please read it carefully and use the forums for clarifications
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.