cancel
Showing results for 
Search instead for 
Did you mean: 

Sapui5 date one day missing

0 Kudos

I want to show the date I got with DatePicker in a section in a table. But the date is missing 1 day.


I tried many methods:
https://answers.sap.com/questions/409976/sap-webide---ui5---date-field-is-not-showing-corre.html

https://answers.sap.com/questions/323063/date-value-is-getting-reduced-by-one-day-while-pas.html

But it didn't work. What is your suggestion?

Accepted Solutions (1)

Accepted Solutions (1)

boghyon
Product and Topic Expert
Product and Topic Expert

Since there is no code, I assume the binding info of the DatePicker is not consistent with the binding info of the Text within the table. It's important to keep them consistent.

If the values are bound with a v2.ODataModel, use:

<DatePicker/Text xmlns="sap.m"
  xmlns:core="sap.ui.core"
  core:require="{ ODataDateTimeType: 'sap/ui/model/odata/type/DateTime' }"
  value/text="{
    path: 'EntryDate',
    type: 'ODataDateTimeType',
    constraints: {
      displayFormat: 'Date'
    }
  }"
/>

Please follow the documented guidelines "Dates, Times, Timestamps, and Time Zones" — must-read for OData V2 and OData V4.

0 Kudos

Thanks for your answer but it didn't work. Where am I doing wrong?

<!--It's a input on my fragmnet-->
<f:SimpleForm editable="true" layout="ResponsiveGridLayout" labelSpanXL="3" labelSpanL="3" labelSpanS="12" adjustLabelSpan="false" emptySpanXL="4" emptySpanL="4" emptySpanM="4" emptySpanS="0" columnsXL="1" columnsL="1" columnsM="1" singleConteinerFullSize="false">
	<f:content>
		<DatePicker id="dpKayitTarih"/>
	</f:content>
</f:SimpleForm>
<cells>
        <!--My code-->
	<!--<Text text="{ path: 'Tarih', type: 'sap.ui.model.type.Date', formatOptions: { pattern: 'MM/dd/yyyy' } }" />--> 
	<!--Your code-->
	<Text xmlns="sap.m" xmlns:core="sap.ui.core" core:require="{ ODataDateTimeType: 'sap/ui/model/odata/type/DateTime' }" text="{ path: 'Tarih', type: 'ODataDateTimeType', constraints: { displayFormat: 'Date' } }"/>
</cells>
boghyon
Product and Topic Expert
Product and Topic Expert
0 Kudos

sehergurel The value-property in DatePicker should be also bound with the v2.ODataModel as suggested in my answer.

  1. Add the missing relative value-binding (i.e. without a leading slash in the beginning) to your DatePicker, same as with <Text text="{...}"/>.
  2. When the user opens the dialog, create a binding Context with myODataModel.createEntry as described in the topic Creating Entities and set the created Context instance with myDialog.setBindingContext.
  3. After the user enters the data and presses [Send], submit the newly created entry to the backend with myODataModel.submitChanges. The Table will be refreshed automatically with the new data (unless refreshAfterChange is disabled).

The above steps are part of the standard approach of dealing with OData binding.
If it requires too many changes in your code, forget all the above steps and try adding `UTC: true` to your Text.

<Text text="{
  path: 'Tarih',
  type: 'sap.ui.model.type.Date',
  formatOptions: {
    ...,
    UTC: true
  }
}" />
0 Kudos

I've tried many methods like this but unfortunately it doesn't work.

petergilberg
Participant

Boghyon's solution definitely works. It's pretty charming you can stick to Databinding and keep away any coding here.

Answers (5)

Answers (5)

Jagtar
Participant

I am assuming your table is directly binded to odata model

<Table items="{/ListSet}">

Can you confirm

if data save at backend for 5th date ?

if not then issue when you passing data to backend at time only you missing one day.

var vTarih = sap.ui.getCore().byId("dpKayitTarih").getDateValue();

To Solve this you need to do as below

resolveTimeDifference:function(dateTime){

if (dateTime !== undefined && dateTime !== null && dateTime !== "") {

var offSet = dateTime.getTimezoneOffset();

var offSetVal = dateTime.getTimezoneOffset() / 60;

var h = Math.floor(Math.abs(offSetVal));

var m = Math.floor((Math.abs(offSetVal) * 60) % 60);

dateTime = new Date(dateTime.setHours(h, m, 0, 0)); return dateTime;

}

return null;

},

var vTarih = this.resolveTimeDifference(sap.ui.getCore().byId("dpKayitTarih").getDateValue());

You are great. Thank you so much. Problem solved.

bugrayuksel1
Discoverer
0 Kudos

Thank you so much!

Jagtar
Participant
0 Kudos

Can you please share your view binding code for date picker.
If you can't share then can you tell if its live binding with odata model or with local json model.

We have same problem in both type binding above given binding will work if its directly binded from odata model.

if you are first copying data to local model then bindind then you need to apply one formatter also .

let us know how you binded?

0 Kudos

I used OData Model.

For Tarih (date) field:

My fragment.view

...
<content>
<f:SimpleForm editable="true" layout="ResponsiveGridLayout" labelSpanXL="3" labelSpanL="3" labelSpanS="12" adjustLabelSpan="false" emptySpanXL="4" emptySpanL="4" emptySpanM="4" emptySpanS="0" columnsXL="1" columnsL="1" columnsM="1" singleConteinerFullSize="false">
	<f:content>
		<DatePicker id="dpKayitTarih"/>
	</f:content>
</f:SimpleForm>
</content>
<buttons>
	<Button text="{i18n>kaydet}" press="onKayitFrag" type="Transparent"/>
	<Button text="{i18n>geri}" press="onGeriFrag" type="Transparent"/>
</buttons>
...
My Worklist.view
<Table>
...
<items>
	<ColumnListItem>
		<cells>
			<Text text="{path: 'Tarih', type: 'sap.ui.model.type.DateTime', formatOptions: { strictParsing: true , UTC: true}}"/>
		</cells>
	</ColumnListItem>
</items>
</Table>

My controller.js/onKayitFrag

onKayitFrag: function() {
	var that = this;
	var vTarih = sap.ui.getCore().byId("dpKayitTarih").getDateValue();
	var sData = {
		Tarih: vTarih
	};
	sap.ui.core.BusyIndicator.show();
	this.getView().getModel().create("/ListSet", sData, {
		success: function(oData) {
			sap.ui.core.BusyIndicator.hide();
			that._getKayitDialog().close();
			that.onRefresh();
			MessageToast.show("Başarılı");
		},
		error: function(oError) {
			sap.ui.core.BusyIndicator.hide();
			that._getKayitDialog().close();
			MessageToast.show("Başarısız");
		}
	});
}<br>
Jagtar
Participant
0 Kudos

Use binding as below it will work
text="{path: 'date', type: 'sap.ui.model.type.DateTime', formatOptions: { strictParsing: true , UTC: true}}

Issue is coming to you because of time zone .Some time server and client have different time zone

I've tried many methods like this but unfortunately it doesn't work.

<Text text="{path: 'Tarih', type: 'sap.ui.model.type.DateTime', formatOptions: { strictParsing: true , UTC: true}}"/>

former_member654880
Discoverer
0 Kudos

Hi,

You can also refer below code:

<DatePicker id="myDatePicker" placeholder="Enter Date" value="{ path:'/dateValue', type:'sap.ui.model.type.Date', formatOptions: { strictParsing: true, UTC: true } }" />

Riya

0 Kudos

Unfortunately it doesn't work 😞

former_member450774
Participant
0 Kudos

Hi,

Use the below sample code for reference.

In XML view:

<DatePicker id="SubmissionDate" value="{path: '/SubmissionDate', type:'sap.ui.model.type.Date', formatOptions:{ pattern : 'yyyy-MM-dd'}}" width="auto" displayFormat="medium" enabled="true" visible="true" valueFormat="yyyyMMdd" required="false"/>

In controller:

var sStartDt = new Date(this.byId("SubmissionDate").getValue());

or

var sNStartDt = (sStartDt.getFullYear()).toString()+'-' +(sStartDt.getMonth()+ 1).toString()+'-'+(sStartDt.getDate()).toString()+"T00:00:00Z"

Hope it helped you!

Rajesh

0 Kudos

Can you explain in more detail how to I use this?

former_member450774
Participant
0 Kudos

Hi,

Inside simpleform change the datepicker code to below.

<f:SimpleForm editable="true" layout="ResponsiveGridLayout" labelSpanXL="3" labelSpanL="3" labelSpanS="12" adjustLabelSpan="false" emptySpanXL="4" emptySpanL="4" emptySpanM="4" emptySpanS="0" columnsXL="1" columnsL="1" columnsM="1" singleConteinerFullSize="false"><f:content><DatePicker id="dpKayitTarih" value="{path: '/SubmissionDate', type:'sap.ui.model.type.Date', formatOptions:{ pattern : 'yyyy-MM-dd'}}" width="auto" displayFormat="medium" enabled="true" visible="true" valueFormat="yyyyMMdd" required="false"/></f:content></f:SimpleForm>

inside the controller , get the date value as below.

var vTarih =  new Date(this.byId("dpKayitTarih").getValue());

or 
var vTarihDat =  new Date(this.byId("dpKayitTarih").getValue(
var vTarih = (vTarihDat.getFullYear()).toString()+'-' +(vTarihDat.getMonth()+ 1).toString()+'-'+(vTarihDat.getDate()).toString()+"T00:00:00Z"