Skip to Content

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

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



Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

4 Answers

  • Best Answer
    Jan 09, 2017 at 01:45 AM

    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.

    Add comment
    10|10000 characters needed characters exceeded

  • Sep 15, 2017 at 10:43 AM

    A simpler and neater solution to this -

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

    Add comment
    10|10000 characters needed characters exceeded

    • 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.

  • Jan 10, 2017 at 03:52 AM

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

    Add comment
    10|10000 characters needed characters exceeded

  • avatar image
    Former Member
    Mar 07, 2017 at 12:39 PM

    Your post saved my life! S2

    Add comment
    10|10000 characters needed characters exceeded