[Feature]: <DateTime/> Picker

[EdgarKisman]

Library

React Components / v9 (@fluentui/react-components)

Describe the feature that you would like added

It would be perfect to have a DateTime Picker like the native HTML datetime-locale but to be able to pass a locale or to format the input string with a prop like formatDateToTimeString.

PrimeReact, for example, has such a component https://primereact.org/calendar/#time

Have you discussed this feature with our team

No response

Additional context

No response

Validations

• [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Priority

High

[miroslavstastny]

Thanks for reaching out. Could you please be more specific on what the requirement is?

Is it about a single component which combines date picker and time picker in a single popover? Our current guidance is to use DatePicker and TimePicker side by side, as documented in Time Picker With Date Picker example.

Or about custom formatting for time? TimePicker component allows you to use custom formatter and parser, see Freeform Custom Parsing example.

[EdgarKisman]

Is it about a single component which combines date picker and time picker in a single popover? Our current guidance is to use DatePicker and TimePicker side by side, as documented in Time Picker With Date Picker example.

Or about custom formatting for time? TimePicker component allows you to use custom formatter and parser, see Freeform Custom Parsing example.

Both, we need a component which combines date picker and time picker in a single popover (current solution "datetime-locale), and also the possibility to format the chosen datetime to display it to the user in the selected locale of the application (no solution atm).

The case is that some of our users are only able to use a mouse. Using separate fields for Dateand Time would be ok but not the best solution as the user would need to do a lot of scrolling to pick the exact time he requires, e.g. 18:41. We would also need to concatenate date and time programmatically to send it to our backend.

The solution we have atm is using v9 <Input type="datetime-locale"/> the problem with the native type "datetime-locale" is, that there is no implementation to format the chosen datetime to display in the current user locale. Setting timezones, Using datetime-local inputs

Something like <Input type="datetime-locale"/> but with the ability to pass a locale or to format the input to show it to the user in the selected locale would be the solution we are looking for.

That's why I was thinking of something like a DateTimePicker component with props like formatDate and also fluentui styling.

[microsoft-github-policy-service[bot]]

no assignees

Gentle ping that this issue needs attention.

[EdgarKisman]

@miroslavstastny any decision on this one?