Polaris-react: Feature request: Time picker

[buggy]

Issue summary

Provide a time picker for apps that allows users to enter a time value.

Expected behavior

Some apps allow the user to enter a time. For example: A flash sale might run from 6pm to 9pm.

It would be useful to have a time picker component so that all apps have a common look & feel when entering time values. The use of <input type="time" > isn't supported by all browsers.

Actual behavior

input type="time" doesn't work all browsers.

Steps to Reproduce the Problem

N/A

Specifications

• Polaris version: 1.0.3

[lemonmade]

Thanks for the issue, @buggy. I've opened an issue for this internally and will update here if we have anything to share. For now, our recommendation is to use the type="time" input, as you suggested, though you are definitely correct that it's not going to work across browsers.

[asacarter]

plus 1 for a time picker. Also more options for the date picker such as selecting a single date rather than a range.

[mikeyhew]

+1. This is a bit more complicated than it seems, because you have to think about time zones and daylight savings time. Ideally, the time picker would use the shop's time zone – perhaps it could be exposed through the Embedded App SDK?

The following is hopefully an exhaustive list of everything you might want to accomplish with a Date, Time, or Datetime Picker component, along with tickboxes showing what is supported right now.

• [ ] select a single date: June 10, 2017
• [x] select a date range: June 10, 2017 to June 14, 2017
• [ ] select a single date & time: June 10, 2017 at 1:19pm EDT¹
• [ ] select a datetime range: June 10, 2017 at 1:19pm EDT to June 14, 2017 at 11:00 am EDT
• [ ] select a single time of day: 5:00pm EDT
• [ ] select a time of day range: 5:00pm EDT - 7:00pm EDT²

It would be cool if, at some point in the future, each of these cases could be expressed using a single component. (Whether there be a separate component for each case, or one component that does them all, does not matter.) In the meantime, though, if a TimePicker component was added, and the DatePicker supported single dates instead of just a ranges, then all of these cases would be possible using multiple components and a bit of javascript glue code.

---

¹ EDT = Eastern Daylight Savings Time
² Maybe they're offering cheaper drinks during cinq à sept

[buggy]

I'm concerned that @mikeyhew's comment might cause this feature request to be put into the too complicated basket or delayed in an attempt to build a complicated component. This feature request is for a time picker _not_ a datetime picker (that should be it's own feature request).

A simple time picker that allows people to enter a time (or time range) would cover a lot of common use cases.

• Start/end times for offers/sales/etc
• Time to send notifications, perform actions, etc
• Opening hours for stores
• etc

Implementing this could be as simple as 2-3 select boxes for hours, minutes, and am/pm (if using 12 hour time). Developers would need options for

• Display 12 or 24 hour time (I would only support 24 hour time for properties and event handlers)
• Earliest time allowed
• Last time allowed
• Start and end times (for time range)
• Minute interval (number) - show every minute, every 5 minutes, 10 minutes, 15 minutes, etc in the minutes select.

I also wonder how important timezone support really is? I've seen plenty of apps that ask for a time but not many that ask for time + timezone so I would hold off on time + timezone until someone asks for it.

[ry5n]

Thanks again for this feature request. The time picker component remains in our backlog, and we’re not working on it right now. Since we can’t promise timelines, I’ll close this issue for now.

However, we encourage everyone who wants this feature to add a 👍 to the original issue report. We’ll take your collective interest into account when we look at what to work on next.

💜

[sylvhama]

I wanted to create a similar feature request so I am re-opening this one 😬

I've seen flows were people used Autocomplete component to simulate a time picker. I think we can offer a better UX.

The goal would be to create a React component that will be similar to what material-ui has done but with a Polaris touch.

I've made a list of things that should be covered:

• Being able to select hours and minutes or to type them directly;
• I guess the component would return a Date format;
• 12-hour and 24-hour formats;
• AM / PM (if 12-hour);
• Accessibility (screen readers, keyboard navigation...);
• Should we default to the native picker on mobile by using <input type="time" />?

[devchris]

Is there any update on this?

[sylvhama]

I've made a prototype here: https://github.com/Shopify/polaris-react/pull/2973

I sadly don't have time nowadays to go further. Feel free to fork my branch.