Date Range Picker should deliver date objects in the change event

[MFel0123]

Feature Request Description

The Date Range Picker works with different languages and date formats. But it seems (correct me if I am wrong) that the regarding change event that delivers the result date range (for further processing in the using app) is just delivered in form of a string. See section events here: https://sap.github.io/ui5-webcomponents/playground/components/DateRangePicker/

Proposed Solution

The resulting change event should have real date objects (type Date) fromDate and toDate of type Date (not just a string).

Proposed Alternatives

The question is how to get the real date objects out of the offered string representation (for different languages). it is not a convenient to figure out the date format for each and every language.

Additional Context

Add other context or screenshots related to the feature request here.

Priority

• [ ] Low
• [ ] Medium
• [x] High
• [ ] Very High

A clear and concise description of the impact/urgency of the required feature.

Stakeholder Info (if applicable)

• Organization: {...}
• Business impact: {...}

[georgimkv]

Hello @SAP/ui5-webcomponents-topic-b, take a look of this feature request.

[MFel0123]

Additional remark: It seems that when the change event handling method is reached, the provided read only properties startDateValueand endDateValue are not filled with the correct date values ("showing "Invalid date" or the old values). Only after the picker tool is closed again I could use them and see the correct resulting date values. So it seems that they do not work as we expected.

[vladitasev]

I also think we should provide these in the event data, as they are not accessible before the value has been set.

Background: the value property is not updated until the change event is fired and all handlers are fully executed. The reason is that the app can call event.preventDefault for the change event of the DateRangePicker (f.e. due to custom validation logic). If the app does so, then the value will not be updated. Therefore, the code handling the execution of the change event must wait for the result of all event handlers. This however means that change event handlers have no access to the startDateValue and endDateValue properties, as these are completely based on value.

The solution would be to add these to the event data, as requested in this issue.

The workaround would be to wrap the change event handler's code in a setTimeout.

document.getElementById('daterange-picker1').addEventListener('ui5-change', function(e) {
            setTimeout(() => {
                console.log(document.getElementById('daterange-picker1').startDateValue, document.getElementById('daterange-picker1').endDateValue);
                document.getElementById("labelChange").innerHTML = Number(document.getElementById("labelChange").innerHTML) + 1;
            });
        });

[MFel0123]

Hello, thank you very much for hanging in there and also for the preliminary workaround. We will make use of it until a final solution is available. As you also proposed: To have the data in the event would be better and we would appreciate that. Thanks again.

[al-gerasimov]

Faced the same issue. I think having both dates in the event is a preferred solution. As another workaround I found out that you can use _extractXXXTimestamp(value) methods, but because they are private you have to modify the component.

[DMihaylova]

Backlog item created for internal tracking: BGSOFUIBALKAN-8610.

[unazko]

Hello @MFel0123 and @vladitasev,

Not sure if I understand the issue correctly. Please do checkout the following sample: https://stackblitz.com/edit/github-pwfft8-biucqq?file=index.html In this sample the default behavior is prevented on change and there is already a pre-defined value from before. I'm using the following steps: 1) Opening the picker popover: 2) Selecting 3rd of September for a start date and 7th of September for an end date via mouse

Result: The change handler is getting called. In the change event we have this.startDateValue and this.endDateValue corresponding to 3rd and 7th of September. As the default behavior is prevented the previous value(10 Sept 2024 - 15 Sept 2024) gets retrieved after events are handled. Also the this.value is "3 Sept 2024 - 7 Sept 2024" from inside the change handler. Those are not old values.

What is the expected result here? And also could you edit the already provided sample if it deviates from your use case.

Best regards, Boyan

[unazko]

Hello @MFel0123,

I think that this issue is already fixed via the following PR eighteen months ago: https://github.com/SAP/ui5-webcomponents/pull/6693/files

[unazko]

Hello @MFel0123,

I'm currently changing the status of the report to closed. Please do reopen the incident in case the issue still persists.

[MFel0123]

Thank you, I would have contacted you already if we would have come across an error. Its alright to close the issue now.