feat: Date Picker

[mattgoedde]

🙋 Feature Request
Would love to see functionality to bind the calendar to an input element. Would be nice to have this configurable between these input types:

• datetime-local
• month
• week
• date
• time

🤔 Expected Behavior
Input component with Calendar popover for selecting dates/times.

[parashgoswami]

Definitely this is required

[vnbaaij]

This will be available in the next version. Stay tuned...

[vnbaaij]

This has now been merged into new-components branch and will be part of v3 (no due date yet): #448
Test drive it here: https://calm-sea-053fa6a03-365.westeurope.3.azurestaticapps.net/DateTime

[mattgoedde]

Looks awesome! One thing I'd note is that the lack of default value on time picker makes the text box rather small (I viewed it on mobile).

[dvoituron]

Interesting. Thanks for your feedback. I'll add a min-width value to avoid this issue on mobile.

[dvoituron]

Fixed via the PR #454

[parashgoswami]

Looks great. One observation for your consideration: If I have to enter date of birth, I have to either click the arrow to reach upto my year and month of birth or else select my day and month of birth in the current year and once the date is selected in the text box, manually change the year. Can you please put options as available in the Fluent UI react control. Please refer to the screenshot below: [image: image.png] Thanx & Regards Parash

…

On Tue, Jun 13, 2023 at 2:44 AM Denis Voituron ***@***.***> wrote: Interesting. Thanks for your feedback. I'll add a min-width value to avoid this issue on mobile. — Reply to this email directly, view it on GitHub <#416 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AHKTT4ZVLG7YKUHDCGBBCGLXK6BDJANCNFSM6AAAAAAYVMK2CY> . You are receiving this because you commented.Message ID: ***@***.*** com>

[dvoituron]

Thank you,
This "month/year" selector will probably be added in a future version.
For now, you can write the date in the text field to avoid clicking several times on the month arrow :-)
Denis

[LuohuaRain]

Looks nice, but does it look possible for the DatePicker to be bound to the DateOnly type, and for the TimePicker to be bound to the TimeOnly type?

[dvoituron]

We added multiple date types to the FluentDatePicker v5: #4153

[SharmaAishna]

Fluent UI DatePicker accepts legacy DDMMYYYY input .how to strictly reject it ?

We have a legacy backend product that is over 30 years old, and it historically accepts dates entered in the numeric DDMMYYYY format (for example, 01012025). We are currently modernizing the system and introducing the Fluent UI DatePicker on the frontend.

Problem

When users type 01012025 directly into the Fluent UI DatePicker input, the component does not reject or modify this input. Unlike other date formats which are reformatted or validated by the DatePicker this legacy numeric format is effectively ignored and remains unchanged.

Our goal is to explicitly reject this format and allow only properly formatted dates, such as locale-based formats (MM/DD/YYYY or DD/MM/YYYY).

Many of our users are habituated to typing dates in this legacy way, but as part of the modernization effort, we want to prevent the use of numeric DDMMYYYY input going forward and enforce stricter date validation.