Question Re: SAPUI5 DatePicker - short format issue in Technology Q&A

SAPUI5 DatePicker - short format issue

jakob_steen-petersen — Sat, 14 Nov 2020 14:03:37 GMT

I have a DatePicker like this

<DatePicker id="inputAfregnDato" displayFormat="short" value="{ path: 'InputAfregnDato', type: 'sap.ui.model.odata.type.DateTime', formatOptions: { displayFormat: 'Date',                		                                                        UTC: true             } }"/>

But when i pick a date it display like this:

How can i display just a simple date like 20.11.2020 ?

Re: SAPUI5 DatePicker - short format issue

boghyon — Sat, 14 Nov 2020 15:25:28 GMT

As explained in this answer as well as in this topic Date and Time Related Controls: Data Binding, the attribute 'displayFormat' should be added to 'constraints' instead of 'formatOptions'.

<DatePicker id="inputAfregnDato"
  value="{
    path: 'InputAfregnDato',
    type: 'sap.ui.model.odata.type.DateTime',
    constraints: {
      displayFormat: 'Date'
    }
  }"
/>

Re: SAPUI5 DatePicker - short format issue

jakob_steen-petersen — Sat, 14 Nov 2020 15:34:57 GMT

Hi
Tried that - it gives the exact same result.....

Re: SAPUI5 DatePicker - short format issue

boghyon — Sat, 14 Nov 2020 15:44:16 GMT

jakob.steen-petersen Ok, then let's debug together.

Is the Type of the "InputAfregnDato" property in $metadata "Edm.DateTime" in the first place?
Are you working with OData V2? Or V4?
What is the format of the date value in JSON output? (should look like this)

Re: SAPUI5 DatePicker - short format issue

jakob_steen-petersen — Sun, 15 Nov 2020 15:24:29 GMT

Hi Boghyon

- Edm.DateTime

- Odata V2

- format is like this: "InputAfregnDato":"\/Date(1606694400000)\/",

Re: SAPUI5 DatePicker - short format issue

boghyon — Thu, 19 Nov 2020 12:02:25 GMT

jakob.steen-petersen Is the default model on the DatePicker a "sap.ui.model.odata.v2.ODataModel"? Or are you using an intermediate JSONModel to manipulate the response from the OData service? It just seems very odd that the value is "30. nov. 2020 00.00.00". I can't reproduce that format with ODataModel only.

Re: SAPUI5 DatePicker - short format issue

jakob_steen-petersen — Thu, 19 Nov 2020 13:34:28 GMT

Yes - model is sap.ui.model.odata.v2.ODataModel

No intermediate JSONModel is used....

Re: SAPUI5 DatePicker - short format issue

jakob_steen-petersen — Thu, 19 Nov 2020 19:31:16 GMT

Hi Boghyon

I have no idea why - but problem is solved. What i did was to completely delete the field definition in the view and started all over with new field.

Like this:

<DatePicker id="inputAfregnDato" value="{ path: 'InputAfregnDato', UTC: true }" >
</DatePicker>

So now it is fine 🙂

Thanks for you help anyway!!

Re: SAPUI5 DatePicker - short format issue

boghyon — Thu, 19 Nov 2020 20:12:10 GMT

jakob.steen-petersen Good to hear that it worked. But what do you mean by "delete the field definition / start over with new field"? What is a field exactly? Anyhow, the `UTC` property won't do anything if it's added there. PropertyBinding has no UTC (See API reference "bindProperty"). It does, however, support the "type". Please try again with the snippet from the answer. If the default model on the DatePicker is v2.ODataModel with the response fully conforming to the OData spec, the snippet will work as demonstrated and explained in other resources.

Re: SAPUI5 DatePicker - short format issue

boghyon — Thu, 19 Nov 2020 20:23:35 GMT

jakob.steen-petersen I'd suggest to remove `UTC: true` altogether unless it's absolutely required by the business. Otherwise, you might get 1 day plus/minus off depending on the user's locale setting. Display date / date-time / time always in user's local time (no UTC). When used together with "type: 'sap.ui.model.odata.type.DateTime'" and "constraints: { displayFormat: 'Date' }", the date will be sent to backend in UTC anyway (due to use of Date#getTime internally. See the discussion here) but the value is displayed in the user's local time (without the potential 1 day offset) as it typically should be.