[Date picker] How to provide a value of type Date

[arezki4]

Describe the documentation issue

Documentation is unclear

Description

Hello,

I am reaching out to open this ticket because I cannot find anywhere in your documentation how to provide a value of type Date as input to the datepicker. Could you clarify this for me?

I tried injecting the initial value by using a ref & waitForDefine=true, but it doesn't seem to work as you can see her: https://stackblitz.com/edit/github-cttcavmr?file=src%2FApp.tsx

Thank you for your response! Best regards,

Link to Documentation Page

https://sap.github.io/ui5-webcomponents-react/v1/?path=/docs/inputs-datepicker--docs

Declaration

• [x] I’m not disclosing any internal or sensitive information.

[Lukas742]

Hi @arezki4

I tried creating an example but had a hard time finding a satisfying solution as well. That's why I'm forwarding this issue to the ui5-webcomponents repo as I suspect that the component might even have a bug.

You can still achieve the behavior, but only by waiting a arbitrary time until the CLDR data is ready(?) for consumption. Typically, a callback ref is good way to set the initial value via Date object. There you can set it once the DatePicker node is available (with waitForDefine={true} the custom element is then also defined). You can find out more about this in the StackBlitz example I've created: https://stackblitz.com/edit/github-cttcavmr-a6tyuuv7?file=src%2FApp.tsx,index.html,src%2Fmain.tsx (please note that I changed the language to en_GB for better isolation)

Also these issues seem related to your problem as well: https://github.com/SAP/ui5-webcomponents/issues/11537, https://github.com/SAP/ui5-webcomponents/issues/9038

---

Hi Colleagues,

when trying to set an initial value via a Date object using formatValue, it's not clear when this method can be called. I've tried it in different ways, but was only successful by using setTimeout. What is the recommended way to achieve this?

Currently, a CLDR error is thrown when using formatValue too early and depending on when the formatValue method is called, the component even crashes. To visualize the behavior I've created this StackBlitz example. In case you have questions, please let me know!

https://stackblitz.com/edit/github-cttcavmr-a6tyuuv7?file=src%2FApp.tsx,index.html,src%2Fmain.tsx (please note that I changed the language to en_GB for better isolation)

[LidiyaGeorgieva]

Hello @SAP/ui5-webcomponents-topic-b please have a look. Follow the steps from Lucas (previous comment).

[arezki4]

Hello,

I am reaching out to ask in which release you are planning to release a fix for this bug ?

Thank you for your response !

Best regards,

[pskelin]

Hi @arezki4 , we are discussing an API change of the date picker to make it more convenient to use from react. These will be addressed by https://github.com/SAP/ui5-webcomponents/issues/11612

In the mean time as a workaround, please use the following:

1. the datepicker can fallback to an ISO value if it cannot parse any other value, so value='2025-05-30' will be accepted and formatted

getting an ISO value is a bit tricky because of timezones. If you create a date for today like new Date() or create a date with year/month/day like new Date(year, month, day), it will be in your local timezone. Using something like

const today = new Date();
console.log(today.toString())
console.log(today.toISOString())
// Fri May 30 2025 15:04:58 GMT+0300 (Eastern European Summer Time)
// 2025-05-30T12:04:58.513Z

might break because the ISO string is converted to UTC and if I run this at 1:00 am I will get the previous day which is wrong (first is 15:xx, second is 12:xx)

The full solution is the convert the current time to the same time in UTC so that toISOString() will return the absolute same value in UTC.

const localDate = new Date();
const offset = localDate.getTimezoneOffset();
const localISOTime = new Date(localDate.getTime() - (offset * 60 * 1000)).toISOString();
console.log(localISOTime); // ISO string adjusted for local timezone
console.log(localISOTime.split("T")[0]); // date part of ISO string adjusted for local timezone
// 2025-05-30T15:08:09.210Z
// 2025-05-30

Please use this calculation for now, until we improve the API and provide an documentation page of common use cases accounting for timezone and calendar types.

[tsanislavgatev]

As @pskelin mentioned, an API change was done in https://github.com/SAP/ui5-webcomponents/issues/11612 , so now the valueFormat can be cusomised and the value can be provided in the specific format, different than the dipslayed one.

[github-actions[bot]]

This issue has been closed. To reopen, just leave a comment!