ui5-webcomponents
ui5-webcomponents copied to clipboard
SAP
Date Range Picker should deliver date objects in the change event
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: {...}
Additional remark: It seems that when the change event handling method is reached, the provided read only properties startDateValue and 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.
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;
});
});
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.
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.
