openui5 icon indicating copy to clipboard operation
openui5 copied to clipboard

sap.m.TimePicker resets dateValue to Jan 01 1970 when changing AM/PM

Open koemaeda opened this issue 3 years ago • 2 comments

OpenUI5 version: 1.104.0 (Latest at time of writing)

Browser/version (+device/version): Chrome 103.0.5060.134 / Windows 10 21H2

Any other tested browsers/devices(OK/FAIL):

URL (minimal example if possible): https://openui5.hana.ondemand.com/#/entity/sap.m.TimePicker/sample/sap.m.sample.TimePicker

User/password (if required and possible - do not post any confidential information here):

Steps to reproduce the problem:

  1. In the TimePicker sample application, notice that the 3rd field (id "TP3") uses the dateValue property set to the current Date, and displays (in English) in the label above it the format: "hh:mm a, dateValue: Wed Aug 03 2022 14:47:14 GMT-0400 (Eastern Daylight Time)"
  2. Click on the little clock icon in the TimePicker, then change the AM/PM (e.g. from PM to AM or vice-versa) and click on OK.
  3. Notice that the label above it now has the date portion "Jan 01 1970".

What is the expected result? The TimePicker control should not reset the date portion of dateValue when changing time.

What happens instead? The dateValue's date portion is reset to January 1st, 1970. This makes it impossible to perform comparison or validation operations. For example, when having 2 TimePicker controls for a time range, it's not possible to validate that the end is later than the start by simply comparing the dateValue property.

if (timePickerEnd.getDateValue() < timePickerStart.getDateValue()) {
  ...
}

Any other information? (attach screenshot if possible) image image

koemaeda avatar Aug 03 '22 19:08 koemaeda

Hello Colleagues,

The problem here is that the _parseValue get the time as a string 02:42 PM and then that value gets parsed to Thu Jan 01 1970 14:42:00 GMT+0200 (Eastern European Standard Time) and gets set to the dateValue property of the control which populates the binding (two way) and then the label gets updated with the wrong year.

Regards, Martin

MapTo0 avatar Aug 04 '22 11:08 MapTo0

Dear @koemaeda

Thank you for your pull request. I've created an internal record 2280152856. The status of the issue will be updated here in GitHub.

Regards, Martin

MapTo0 avatar Aug 04 '22 11:08 MapTo0

Hi @koemaeda,

this is not the TimePicker that is resetting the date part. In the sample from the demokit the dateValue property of the TimePicker is bound against a json model which holds the value new Date() so that the control shows a time initially. Also the binding has set the type sap.ui.model.type.Time. This type parses the input and only considers the time part when parsing the input to a JS date object. So the type will always return Thu Jan 01 1970 [and the time]. Shouldn't it be possible to compare two dateValues of two TimePickers like that:

if (timePickerEnd.getDateValue().getHours() < timePickerStart.getDateValue().getHours()) { ... }

In the end when you are dealing with a TimePicker and the sap.ui.model.type.Time you should only want to consider the time part of a time stamp (JS Date) and not the date part.

Let me know what you think.

Greetings, Peter.

PeterBuchholz avatar Nov 30 '22 15:11 PeterBuchholz

Hi @koemaeda, it is as PeterBucholz explained. With the TimePicker only the time part of the given value is relevant. When parsing the value the date/month/year part is not given and is therefore set to Jan 01 1970. If the date/month/year part is relevant for your scenario you may use DateTimePicker with the corresponding data types instead. Best Regards, Sven

SvBe avatar Dec 14 '22 08:12 SvBe