Correct binding for DateTime field to DatePicker when bound to ABAP Date (not timestamp)?

[MattHarding]

Hi All,

Decided to finally put this question out there since I believe many of us struggle with the right way of handling date only Edm.DateTimes in UI5 (without needing to do manual manipulation of the date in JavaScript) so here we go:

I know OData v4 (with sap.ui.model.type.Date) will probably fix everything with dates, but for now, I'd like to get an idea of what the right way to bound a date value from ABAP through to a DatePicker in a way that lets you use UTC datetime to avoid problems with the conversion between UI5 and ABAP (a problem in the afternoons in Australia).

In other words - I have a Edm.DateTime field which is connected to an ABAP Date data element so that I get automatic conversion (I don't want to complicate the Gateway service and use a different data type).

Now when I use the sap.m.DatePicker, I bind the Edm.DateTime property to the "dateValue" of the DatePicker.

This works well, except will give me a problem in the afternoon in Australia since the date is converted incorrectly.

Hence if I try bind to dateValue using:

{path: 'DateOfBirth', type: 'sap.ui.model.type.DateTime', constraints: {displayFormat: 'Date'}, formatOptions: {UTC: true}}

This doesn't actually bind at all.

I could bind this to value and it looks like it works, but it misses the whole validating the date value before updating the odata property which is a desired feature I need.

Graham Robinson mentioned in his talk about using Edm.DateTimeOffset, but that does not appear to allow you to map it to a date only ABAP field so I've ruled that out for now, though I also understand Edm.DateTime is being retired in favour of this in the future, but that probably can't be done till Edm.Date is available in Gateway (Odata v4).

Anyone have a best practice here???

Thanks,

Matt

[MattHarding · Accepted solution]

Okay - To kick off with "a" solution, if you have a DatePicker defined like so for a date of birth:

<DatePicker placeholder="Enter Contractor's Date of Birth" displayFormat="medium" 
change="onDatePickerChange" dateValue="{DateOfBirth}"/>

While the OData property is bound, we use the change event to update the property manually to a UTC offset local timezone like so:

onDatePickerChange: function(oEvent) {
	// Format date to remove UTC issue
	var oDatePicker = oEvent.getSource();
	var oBinding = oDatePicker.getBinding("dateValue");
	var oNewDate = oDatePicker.getDateValue();
	if (oNewDate) {
		var sPath = oBinding.getContext().getPath() + "/" + oBinding.getPath();
		var oFormatDate = sap.ui.core.format.DateFormat.getDateTimeInstance({
			pattern: "yyyy-MM-ddTKK:mm:ss"
		});
		oBinding.getModel().setProperty(sPath, new Date(oFormatDate.format(oNewDate)));
	}
}

Please note that if the DatePicker value is cleared, we let the default binding handle the update of DateOfBirth to null.

All up, not ideal, but that's a proposed solution till we are on v4 of OData.

[MattHarding · Accepted solution]

Apparently this wasn't enough either...The following seems to work though:

onChangeDatePicker: function(oEvent) {
	// Format date to remove UTC issue
	var oDatePicker = oEvent.getSource();
	var oNewDate = oDatePicker.getDateValue();
	if (oNewDate) {
		oDatePicker.setDateValue(this.convertDateTimeToDateOnly(oNewDate));
	}
},
convertDateTimeToDateOnly: function(oDateTime) {
	var oFormatDate = DateFormat.getDateTimeInstance({
		pattern: "yyyy-MM-ddTKK:mm:ss"
	});
	var oDate = oFormatDate.format(oDateTime);
	oDate = oDate.split("T");
	var oDateActual = oDate[0];
	return new Date(oDateActual);
}

[Former Member · Accepted solution]

Excellent work here... I've had it working just fine in Chrome but not IE. This solution works good in both! 😉

[former_member388032]

A simpler and neater solution to this -

{path:'DateOfBirth',type:'sap.ui.model.odata.type.DateTime', constraints:{displayFormat:'Date'}, formatOptions:{pattern: 'MM-dd-yyyy'}}

[MattHarding]

Thanks Rohit. Just to confirm, are you sure this also takes care of the issue where Date Time likes to use the local timezone of the browser and when it gets passed back to SAP it converts it to the previous day? (e.g. It forces the time to 00:00 UTC?) - refer to my commented version above to the final solution I came up with.

[former_member388032]

Hi Matt,

This is not working in that scenario, as there your solution, to have it as yyyy-MM-ddT00:00:00 would only work.

The solution provided works when fetching from SAP and displaying it in UI, and there we have browser specific timezone converting the date to a previous day.

[Former Member]

Your post saved my life! S2

[kemi]

Thanks Matt, This solution solve my one day off issue between datapicker and abap backend

[MattHarding]

No problems Kemin. It seems to work, though haven't tested exhaustively around daylight savings and midnight yet in every timezone (and never will)...