SAPUI5 DatePicker - short format issue

[jakob_steen-petersen]

Hi

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 ?

[boghyon · Accepted solution]

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'
    }
  }"
/>

[jakob_steen-petersen · Accepted solution]

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

[boghyon · Accepted solution]

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)

[jakob_steen-petersen · Accepted solution]

Hi Boghyon

- Edm.DateTime

- Odata V2

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

[boghyon · Accepted solution]

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.

[jakob_steen-petersen · Accepted solution]

Hi

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

No intermediate JSONModel is used....

[jakob_steen-petersen · Accepted solution]

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!!

[boghyon · Accepted solution]

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.

[boghyon · Accepted solution]

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.