28
Views
5
Comments
Solved
[OutSystems UI Web] Date Picker Showing One Day Earlier in PST (Traditional Web App - Timezone Issue)
outsystems-ui-web
Web icon
Forge asset by OutSystems
Application Type
Traditional Web

Hi everyone,

We are facing an issue in our Traditional Web Application where the Date Picker displays one day earlier than expected, but only for some timezones like PST.

Detailed Explanation:

We are storing dates in the database as Date type, without time information.

In OutSystems, we also handle these fields as Date type (not DateTime).

The correct date is saved in the database and when we fetch the data to the screen, the date value is still correct.

The issue happens only on the screen, where the Date Picker shows one day earlier than the actual value, but only in certain timezones (like PST).

 

 Example:

Correct date in DB and fetched list: 5th July 2025

When viewing the app in PST timezone, Date Picker displays: 4th July 2025

When viewing the app in IST timezone, Date Picker displays the correct date: 5th July 2025

 

Additional Info:

We tried converting the Date List to Text, then back to Date before assigning to the Date Picker — didn’t solve the problem.

We tried using functions like UTCToPT() — didn’t help either.

 

 It seems like the Date Picker is applying some hidden timezone offset during rendering, even though everything is handled as Date (without time).

 How can we stop the Date Picker from shifting the date based on timezone?

 Is there a known workaround to make sure the Date Picker always shows the correct date for all timezones?

2022-11-12 11-28-30
Gonçalo Martins
Staff
Solution

Hello @Shivani Rajoriya 

This use case was validated and classified as a bug and tracked under ROU-12425 (for reference on the release note). This will be present in the next release of OutSystems UI Web that will be by the end of January.

Best Regards,
GM

2025-06-22 10-00-21
Nino Gachechiladze

If you're binding a Date Picker or Input widget directly to a Date variable, OutSystems might internally convert it to DateTime with 00:00:00Z time, causing timezone shifts.

Fix:

  • Store your date as a Text ("yyyy-MM-dd") in the screen variable.

  • Use this text to set the input value of the Date Picker.

  • Convert back to Date when saving, using TextToDate().

2024-03-28 06-35-29
Shivani Rajoriya

Hi Nino, thank you so much for your suggestion!

 I had actually tried converting the Date to Text (yyyy-MM-dd) and using that with the Date Picker, but in my case, we have a list of disabled dates, which we use to prevent selection of specific dates.

 Currently, the list of disabled dates is stored as Date type, and applying the Text conversion to both the Date Picker and the disabled dates list adds complexity, especially when doing comparisons.

 Do you think there's a reliable way to handle this timezone rendering issue while still working with the Date type, considering we have disabled dates logic involved? Or would converting everything (both assigned dates and disabled dates list) to Text format be the only option here?

 Appreciate your insights, thanks again for your help!

  

2022-11-12 11-28-30
Gonçalo Martins
Staff

Hello @Shivani Rajoriya 

To make this more collaborative and to make sure the community is looking into the same use case that you're reporting, please share a sample oml where that can be reproduced and please indicate the steps to reproduce the scenario you mentioned (include a GIF/video if it's easier).

Cheers,
GM

UserImage.jpg
Uilon Kelf Orlando Eugenio

Hi @Gonçalo Martins  and @Shivani Rajoriya.

I'm facing the same situation. When debugging the browser, I identified that my list of dates for deactivation is being altered to one day less after passing through the getArrayOfDates() function. Inside this function, new Date() is being used, which, when considering my timezone (GMT -3), is causing me to lose the current day. For example, 2025-07-07T00:00:00 -3 is resulting in 2025-07-06 21:00:00. In the attached image, I captured the moment when my 'disableDates' array contains the dates I want to disable, but the function returns another array with incorrect dates.

One approach I'm trying to implement is to fetch the client's timezone and add 1 day to the date if the local time (00:00:00) results in the previous day when converted to UTC. This approach isn't proving easy to create either.


I also tried some ways to use 'disableDayFn' in AdvancedFormatJSON, but without success. If I send the function inside de JSON or inside the web block properties  I got an errror:


If I write the code on expression the syntaxError isfixed but don't work, dont validate my dates:


2022-11-12 11-28-30
Gonçalo Martins
Staff
Solution

Hello @Shivani Rajoriya 

This use case was validated and classified as a bug and tracked under ROU-12425 (for reference on the release note). This will be present in the next release of OutSystems UI Web that will be by the end of January.

Best Regards,
GM

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.