SAPUI5 Date Input and UTC Conversion

[dirajmore91]

Hi everyone,

I’m currently working as a SAPUI5 developer, and I wanted to open up a discussion (and hopefully learn from you all) about a challenge I keep running into:

DATE HANDLING in UI5/Fiori apps.

Whenever I encounter date fields — whether it's in forms, tables, filters, or while sending/receiving dates via OData — I get a bit anxious 😅. It's not like I haven't dealt with it before, but there always seems to be some unexpected issue:

• Timezone differences
• Formatting inconsistencies (backend vs frontend)
• OData model quirks (Edm.Date vs Edm.DateTimeOffset)
• Date pickers showing wrong values
• Converting to UTC and back again

Scenario 1 - Reading Date from Date Picker ==> Whenever user selects any date from date picker, I want to get the UTC date.

For example - I am working in IST time zone and if I select the date 17-Oct-2025 in date picker and when I read it in my change event handler I get the date as 17-Oct-2025 based on local time zone. But when I tried to get the UTC date, it will be 16-Oct-2025. 

My expectation is when user selects 17-Oct-2025 irrespective of  local time zone, model property(VALID_TO) will be set to UTC date '17-08-2025T00:00:00Z'. I am doing something like this to achieve this.

Date Picker Code in UI view - 

<DatePicker value="{path:'localModel>VALID_TO',type: 'sap.ui.model.type.Date', constraints: { displayFormat: 'Date' }, formatOptions: {pattern: 'yyyy-MM-dd',  strictParsing: true, UTC: true }}" change="handleDateChange"  />

Date Change Event Handler - HandleDateChange in Controller

handleDateChange: function (oEvent) {

        var source = oEvent.getSource(),

          oTable = source.getParent(),          

          contextRow = oTable.getBindingContext("LocalModel").getPath() + "/VALID_TO",

          inputValue = source.getDateValue();

          //Get the Local Date Converted to UTC

          let utcDate = new Date(Date.UTC(inputValue.getFullYear(),inputValue.getMonth(),inputValue.getDate()));

          console.log(utcDate);

          this.getModel('LocalModel').setProperty(contextRow, utcDate);

      }

 This is working as expected. Your thoughts on this and if there is better way of doing it.

Scenario 2 - Using formatter to convert date object to UTC

Formatter Code - Check if date is defined and is a Date Object then format it as per UTC. I want to know if this is correct or there is other way of doing it. Also are there any other conditions which I should add apart from checking date instance. Or this will work in all scenarios.

Scenario 3 - Checking if input/parameter passed is Valid Date Object- Anything else we need to check or some other way of checking it.

Code - 

checkDateObject: function (date) {

      return date instanceof Date && !isNaN(date.getTime());

    }

I would like to hear your thoughts on the common date scenarios mentioned above. Additionally, please inform me whether the code provided above is useful or not.

Thanks,

Dhiraj More

[Mathias_Uhlmann]

Have you checked our documentation Dates, Times, Timestamps, and Time Zones?

In general, I recommend to use the matching Edm-Type for what you want to achieve. If you want to have a date only, then using Edm.Date is the best that could be done. (With OData V2, the equivalent would be Edm.DateTime with display-format="Date".)