Web DatePicker: Time selection

gavinbarron commented 5 years ago

I would like a web implementation of a time picker.

I believe that this would be an expansion of the current web DatePicker as the iOS and Android controls are DateTimePickers. https://developer.microsoft.com/en-us/fabric#/controls/web/datepicker

No, I have not discussed this with the team.

Additional context/screenshots https://developer.microsoft.com/en-us/fabric#/controls/ios/date-time-picker https://developer.microsoft.com/en-us/fabric#/controls/android/date-time-picker

aftab-hassan commented 5 years ago

@gavinbarron thank you for submitting a feature request. TimePicker is an ask we have been receiving recently. We will add it to our backlog review, and discuss it within the team. Please feel free to check back here or post a comment.

cc: @micahgodbolt @lorejoh12 (coming from the Teams thread where we discussed a Calendar input with time input included : FYI

chriskuech commented 5 years ago

TimePicker is an ask we have been receiving recently

What about DateTimePicker? It would be nice to have a single control instead of manage two controls for a single Date object.

htryggva commented 5 years ago

We would also welcome an official UI Fabric time picker component to use in our product. Preferably independent of the Calendar or DatePicker components.

gavinbarron commented 5 years ago

In my opinion there are use cases for both a time picker and datetime picker in addition to the DatePicker.

The MWF Datetime picker control can be configured in Date Picker, DateTime Picker, and Time Picker modes.

Given the current state of the UI Fabric Web controls library I'd suggest that an independent TimePicker control be shipped initially as this would not imply or need any interface change to DatePicker. If a consumer needs a Date Time Picker it should be trivial to compose one with these two controls. A future update could deliver a composite control as part of the library.

Heck, I'd even be happy to put my hand up and write the composed control.

On Thu, Jul 11, 2019, 1:17 AM Hlynur Tryggvason notifications@github.com wrote:

We would also welcome an official UI Fabric time picker component to use in our product. Preferably independent of the Calendar or DatePicker components.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/OfficeDev/office-ui-fabric-react/issues/9545?email_source=notifications&email_token=ABWK6HDIQ2U6HYFNGJJI4CTP63UBNA5CNFSM4H2S4YDKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODZV47DQ#issuecomment-510381966, or mute the thread https://github.com/notifications/unsubscribe-auth/ABWK6HCSAVCB4YXWEOUUAP3P63UBNANCNFSM4H2S4YDA .

micahgodbolt commented 5 years ago

Most teams I talk to say that if they need date and time picking that they will create an HOC that combines a date picker and some sort of time picking (dropdowns usually). This is how outlook is currently doing it, so I don't think design is content with that solution and isn't investing in something different.

If it ain't broke, don't fix it.

chriskuech commented 5 years ago

If it ain't broke, don't fix it.

Makes sense not to change the existing component--but why not merge the HOC back into Fabric? It's a generic enough requirement that HTML even supports datetime inputs natively.

micahgodbolt commented 5 years ago

The HTML version is quite similar to ours in the picking experience.

The main difference is that they place the time picking inside of the input rather than separate controls.

As far as canonizing something in Fabric, it's possible we'll get there eventually. But its not a huge priority due to the ability to easily create a usable control yourself.....which also gives you flexibility to suit it to your application needs.

tomasro27 commented 5 years ago

Also interested in a DateTime picker control. Is this already planned? Just wondering whether I should find an alternative time picker in the mean time.

Thanks!

dehoward commented 5 years ago

Would love to see a DateTime control as well. Or even a separate TimePicker. Is this work on the backlog?

alxHenry commented 4 years ago

Yammer is also interested in either a combined DateTimePicker, or a separate TimePicker component.

georginaso commented 4 years ago

It would be great to have a TimePicker component

agnihotriketan commented 4 years ago

I am using web version of Fluent UI react version 7 in my web application.

I am not able to find time picker control yet. Are you planning to release this timepicker component?

natashajaved commented 4 years ago

What's the update on timePicker? Is there a plan for it to be developed in near future? I and my team have chosen fabric and so far find it great, just a catch that we get to have a timePicker which is a requirement from our client. Will really appreciate if its added soon.

kamil7x commented 4 years ago

Hey guys, any updates on this? This is really needed feature

vixeven commented 4 years ago

Is this a work in progress component? Any updates?

KatieProchilo commented 3 years ago

Interested in an update as well

Shraddha-113 commented 3 years ago

We are using fluent-ui in our project. We needed Timepicker control with Datepicker. Is there any updates on this? We are really looking forward it. If no updates then what can be used instead of it?

ecraig12345 commented 3 years ago

I don't think this is something we currently have on our roadmap, but @JustSlone or @paulgildea (or @lorejoh12 who worked on the DatePicker a lot) should confirm.

DigitalMystery commented 3 years ago

For now, our team is using the Date Picker and then a TextField next to it with the type="time". This is similar to miacahgodbolt's suggestion above. It would be nice to have one control, but it works at least. Happy coding!

JustSlone commented 3 years ago

Yeah, sorry this is not on our roadmap. It does make sense as a component, and if @lorejoh12 is available to work with someone on a community contribution that may be possible.

As for alternatives, one possibility is the interaction used in Outlook Web, which is an editable field with an expandable menu

P.S. If you are interested in seeing this component please 👍 the issue. it helps folks decide what component is good to add

ugreg commented 3 years ago

@JustSlone is there sample code we can see for the editable field with an expandable menu used in Outlook Web? If not maybe others can use this picker as an alternative or a base to start with http://react-component.github.io/time-picker/. There's this control in the UI Fabric https://developer.microsoft.com/en-us/fluentui#/controls/web/combobox that allows you to type in or select times.

FabioNgo commented 3 years ago

any update about this component. I am considering using fluent UI cuz professional design. it will be great if we have the time-picker component

JustSlone commented 3 years ago

@FabioNgo planning is actually starting internally by a partner team on this component. We are only in the early planning and scheduling phase right now so I don't have a concrete timeline (and the work may not end up getting scheduled). Will try to update this when we get more information

CheerfulSatchel commented 3 years ago

Greetings, I hope you are all doing well!

For those that are still interested in this control, this PR creates the preliminary TimePicker control.

Thank you and have a wonderful day!