sap.m.DatePicker is not displaying Date

Question

I am working on SAPUI5 Application using SAPUI5 Lib Version 1.44.19. I have used sap.m.DatePicker for displaying date is bind two way JSON model which is fetching data from oData Service v1.0.

Before binding the oData Date to JSON model, I am doing Date Formatting like :

"ProjectFinishDate": Formatter.getDateToServerDate(oData.PlanProjEdate)

Respective Formatter Function :

getDateToServerDate: function (date) {
        if (date) {
            var d4 = date.getTime();
            var TimezoneOffset = new Date(0).getTimezoneOffset();
            var off = TimezoneOffset * 60 * 1000;
            var sec = d4 + off;
            var date1 = new Date(sec);
            date1.setHours(0, 0, 0, 0);
            return date1;
        } else {
            return null;
        }
}

Respective XML binding is :

<DatePicker id="idInitAppOEInfoFinishDate" dateValue="{ path: 
'oMdlInitApprovalDtlHeader>/ProjectFinishDate' }"                                    
displayFormat="dd-MMM-yyyy" class="padLeft0px" visible="  
{oMdlFieldsVisibility>/ProjectFinishDateVisible}"                                    
enabled="{oMdlFieldsVisibility>/ProjectFinishDateEditable}"                                  
change="onChangeFinishDate">

console output of the oData Service Date after getting formatted.

Thu Oct 18 2018 00:00:00 GMT+0530 (India Standard Time)

And the output for DataPicker is blank.

OData V1 is pretty old. Are you sure it's not V2? Does reading a collection result in "d": { "results": [...] } or just "d": [...]? — Boghyon Hoffmann

Marc Marc · Accepted Answer · 2019-08-06T12:38:59

According to the SAP API, you should not use dateValue.

Although possible to bind it, the recommendation is not to do it. When binding is needed, use value property instead. https://sapui5.hana.ondemand.com/#/api/sap.m.DateTimeField/methods/getDateValue

Since your main problem seems to be timezone related, here is a different approach:

<DatePicker 
    value="{ 
        path: 'oMdlInitApprovalDtlHeader>/ProjectFinishDate', 
        type: 'sap.ui.model.type.Date', 
        formatOptions: { style: 'medium', strictParsing: true , UTC: true }
    }" />

That way your dates will be in coordinated universal time (UTC).

https://ui5hub.com/dealing-with-timezones-in-sapui5/

sap.m.DatePicker is not displaying Date

1 Answers