date convertion YYYYMMDD to MM/DD/YYYY in sap ui5 table dynamic data coming from odata service

[former_member338801]

Hi Experts,

I am getting date from the odata service. I have to convert YYYYMMDD format to MM/DD/YYYY format.

I am using formatter function to do so but it's not converting.

XML code:
<Text text="{path: 'key>date' ,formatter: '.formatter.dateConversion'}" id="__text8"/>

formatter code:
dateConversion: function (inputDate) {
    var date = new Date(inputDate);
    if (!isNaN(date.getTime())) {
     // Months use 0 index.
     return date.getMonth() + 1 + '/' + date.getDate() + '/' + date.getFullYear();
    }

[michael_piesche · Accepted solution]

Why are you trying to implement this yourself. You could also use existing functions, also see the UI5 API-Reference for further information.

If the date format is already e.g. US for your application server or for the user session, the following should work for you:

<Text text="{ path: 'key>date', type: 'sap.ui.model.type.Date'}"/>

If it is for whatever reason not, you can use and set your own format and/or based on the preferred localisation or that of the logged on user:

sap.ui.core.format.DateFormat.getDateInstance(oFormatOptions?, oLocale?)

[former_member338801 · Accepted solution]

Thanks Michael

I have achieved using below format. It would help if someone is looking out for the same.

<Text text="{path: 'key>date',type: 'sap.ui.model.type.Date', formatOptions: { source:{pattern: 'yyyyMMdd' },pattern: 'MM/dd/yyyy' }}" id="date"/>

[Joseph_BERTHE · Accepted solution]

you can use moment.js to manipulate date.

https://momentjs.com/

Regards,

Joseph

[boghyon · Accepted solution]

Hi joseph.berthe

Do you use Moment.js in your productive system? And why? Just curious since UI5 offers sufficient formatting and parsing features respecting user locale and data flow via binding. I'd hesitate to recommend anyone using Moment.js. What features are missing in UI5 that Moment.js provides?

[Joseph_BERTHE · Accepted solution]

Hi boghyon.hoffmann

I'm using moment.js because it is much more easier to manipulate date with that library than using UI5 api. For formating you probably rigth it is quite the same:

With UI5 :

var oFormat = sap.ui.core.format.DateFormat.getInstance({format: "yyy/MMM/d"});
oFormat.format(new Date()); 

With Moment :

moment(onew Date()).format("yyy/MMM/d");

But when you want to compute dates:

moment(myDate).add(2, "days");
moment(myDate).add(1, "week");
moment(myDate).add(-1, "week");

Or finding the first day of week :

moment(myDate).isoWeekday(1)

This is why I'm using moments.

Regards,

Joseph

[former_member338801 · Accepted solution]

Hey Michael,

I am stuck in one date conversion. I am getting error

Uncaught TypeError: j.getTime is not a function. I am getting data in the statusDate field dynamically from the oData service.

Am I doing anything wrong here?

var statusDate = oData.ZZ_ST_DATE;    ("20200302")
     var dateFormat = sap.ui.core.format.DateFormat.getDateInstance({
      pattern: "MM/dd/yyyy"
     });
     var dateFormatted = dateFormat.format(statusDate);
     that.getView().byId("__input0").setValue(dateFormatted);<br>

[michael_piesche · Accepted solution]

ram.mishra, sorry, that is most likely not enough information to help you out. What I do see though from your comment from just above, is that you mention a TypeError j.getTime, but getTime is not called in the code snippet you are showing, so maybe you are looking at the wrong place?

You did however have a getTime call in your code snippet from your original question.

if (!isNaN(date.getTime())) {<br>

Did it work before and maybe you changed the data type and thats why it is not working anymore?

[former_member338801 · Accepted solution]

Hey Michael,

Actually I used the code in case of xml view there it worked but in another case I am doing my code at controller level there it's not working.

XML working code :

<Text text="{path: 'key>date',type: 'sap.ui.model.type.Date', formatOptions: { source:{pattern: 'yyyyMMdd' },pattern: 'MM/dd/yyyy' }}" id="date"/>


Code in the controller didn't work:

     var statusDate = oData.ZZ_ST_DATE;    ("20200302")
     var dateFormat = sap.ui.core.format.DateFormat.getDateInstance({
      pattern: "MM/dd/yyyy"
     });
     var dateFormatted = dateFormat.format(statusDate);
     that.getView().byId("__input0").setValue(dateFormatted);

[former_member338801 · Accepted solution]

..........

[boghyon]

1. Make sure that the entity property has the type "Edm.DateTime" (in OData V2) or "Edm.Date" (in V4). Check the service $metadata document.
2. In the app, bind the property with the data type "sap.ui.model.odata.type.DateTime" and the constraint "displayFormat: 'Date'". See How to Add Date / Time from OData Service Correctly to UI. For OData V4, the model automatically detects and sets the appropriate type to the binding. See topic Type Determination.

[LuizGomes]

https://github.com/SAP/openui5/issues/1332#issuecomment-279339525