ui5-webcomponents: DateTimePicker: Invalid value for property "maxDate"

Describe the bug

I have the error message: Invalid value for property "maxDate": May 5, 2023, 15:07:08 is not compatible with the configured format pattern: "MMM d, yyyy, H:mm:ss"

<DateTimePicker
        formatPattern="MMM d, yyyy, H:mm:ss"
        maxDate={dayjs().format("MMM D[,] YYYY[,] H:mm:ss")}
        value={dayjs().format("MMM D[,] YYYY[,] H:mm:ss")}
      />

I dont understand the problem, the formats should be correct.

Isolated Example

https://codesandbox.io/p/sandbox/sparkling-microservice-9geblb?file=%2Fsrc%2FApp.tsx&selection=[{"endColumn"%3A21%2C"endLineNumber"%3A14%2C"startColumn"%3A21%2C"startLineNumber"%3A14}]

Reproduction steps

…

Expected Behaviour

No response

Screenshots or Videos

UI5 Web Components for React Version

~1.14.0

UI5 Web Components Version

~1.12.2

Browser

Chrome

Operating System

No response

Additional Context

No response

Relevant log output

No response

Declaration

I’m not disclosing any internal or sensitive information.

About this issue

Original URL
State: closed
Created a year ago
Comments: 15 (4 by maintainers)

Most upvoted comments

Hi @C3ntraX

The DayJS() API is proposing a solution to the locale problem. They are offering a localized formats plugin, which you could use with the dayJS, when getting the currentDateTime.

dayjs.extend(LocalizedFormat)
dayjs().format('ll LTS') // results in a dynamic locale 'MMM D, YYYY h:mm:ss A' according to the localized-formats table

Links: https://day.js.org/docs/en/plugin/localized-format https://day.js.org/docs/en/display/format#localized-formats

hinzzx on Jun 14, 2023

Hi @C3ntraX

the issue is not reproducible for me in the given sandboxes as well. Also it seems like that you have accidentally overwritten your initial codeSandbox example. I was baffled as well, because I know that it didn’t work in my codeSandbox provided here (which @hinzzx also referenced, including German language), but then I realized that the only thing changed was the date you’re passing to the values. So, when setting the date to May (de: Mai) instead of June (de: Juni), it is showing the error again. --> codeSandbox

I think I also found the error you’re facing, because the date is not correctly formatted for the given locale. If you format it by leveraging the formatValue method, the error should be gone and the picker should work as intended. --> codeSandbox I didn’t find another way than waiting for the custom-element to be defined and I don’t know how practical that is. Since the formatValue method is only available on the instance of the web component, you would have to do the same in React.

Lukas742 on Jun 14, 2023

Hi @Lukas742

thanks for the clarification. DayJs is the problem it seems, thank you 👍 But one issue I found in your example (which is not a bug)

const currentDateTime = dayjs().subtract(1, “month”) document.getElementById(“date”).textContent = currentDateTime;

This will always return the language in english. You have to format currentDateTime to get the correct language. But this lang has to be imported and set globally. I noticed this, because I have to load the locale dynamically somehow (or not, if I know my locales; or navigator.language)

See: https://codesandbox.io/s/ui5-webcomponents-forked-vplsyc?file=/src/index.js

This way, I dont have to use the picker formatValue with react, which would be really wreid to use.

C3ntraX on Jun 14, 2023