[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

• 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: #11537, #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).