Date & Time Picker component (new)

[reddolan]

Description

A Date or Time Picker is a component used to quickly select a date, dates, time, or date and time value in an input field.

Use cases under consideration

• a "basic” option with the ability to enable features
• calendar selector
• month selector
• year selector
• time selector
• date and time selector
• letter (day) labels above dates
• large touch points
• internationalization (and localization)
  • local date/time formats
  • first day of the week (Sunday or Monday)
• preset date/time options, 1 day, 7 days, 4 weeks, etc.

Future use cases under consideration

• two calendars, side by side
• recognize values not formatting: 01.04.2017 vs 1-4-17
• input masking

Documentation

Date Picker

• use when a user needs to input a date
• today’s date is identified by 000000 and semi bold text
• default view of the Date Picker is today’s date; day, month and year
• default view of weekday indicators is Sunday through Saturday
• weekday indicators can be set to show Monday through Sunday
• Date Picker will show when the focus is on the date input field
• Date Picker will hide when a date is selected or focus has left the input field
• date selected indicator is an action-blue box with white text
• manually typing a date value into the input field will change in the Date Picker
• selecting a new date from the Date Picker will update any previous input field entry
• previous and next month’s date will show in grey, but are selectable
• if the Date picker has been hidden, it can be shown again by clicking in the input field

• to select a different month, click the month label and see the Month selector
• you can scroll/swipe up and down to choose different months
• to select a different year, click the year label and see the Year selector
• additional year can be scrolled/swiped to up and down depending on the data set
• making a month or year selection will return the user to the calendar view
• selecting a currently selected value will keep that selection and return to the calendar

Date Range Picker

• use when a user needs to select a range of dates
• selected date indicator shows on the first and last selected dates
• dates in between the first and last dates will be filled with #D9E4EA and can span rows
• range can be selected by clicking and dragging or by clicking one date and then a second
• clicking and dragging either the start or end date will change the range
• after a range has been selected:
  • clicking on a date after the start date will update the end date
  • clicking on a date before the start date will update the start date

Time Picker

• clicking an up caret will change the value up by one increment: 10 to 11
• clicking a down caret will change the value down by one increment: 10 to 9
• default increments are 1 hour and 1 minute
• scrolling/swiping on a value will change it up and down
• minute increments can be set to 5, 10, 15, 30 or a custom value
• Time Picker recognizes locale and will swap to 24 hour, or 24 hour can be chosen
• time value will select current time by default, or can be overridden by a custom value
• clicking the AM or PM will switch the selection, action-blue being the selected value

• touching any hour or minute indicator will select that value
• selected values turn active-blue
• touch and drag in a circular motion will move the indicator from one increment to the next
• Time Picker recognizes locale and selecting PM will change hour values to 24 hour values
• time value will select current time by default, or can be overridden by a custom value
• clicking the AM or PM will switch the selection, action-blue being the selected value

Date & Time Picker

• use when the user needs to input a date and time value for something
• has all of the normal functionality of Date and Time Picker combined into one
• used with one input field
• updating either component will update the value in the input field

Quick Picker

• use when a user needs to pick a date or time from a small set of values
• using this component retains date/time stamp data formatting vs using a Dropdown

References

• Material Design, iOS, Mac Mail, Outlook, Southwest, Homeaway

Documentation is subject to change

[kaleksandrov]

Hi @mathisscott,

Thanks for the fast reply!

We need the date and time picker in order to use it in a bigger component for picking a time range, where the user should be able to pick starting and ending time of a period. That's why we need both the date and time pickers. Our deadline is at the end of the year, however anytime sooner will be great.

Thanks!

[mathisscott]

@kaleksandrov The time picker is not part of the initial delivery. That will come in a later phase.

And I don't know if there will be enough time post-delivery of the date picker for you to integrate it by the end of the year. We're still a ways out on it.

I advise moving forward with another datepicker like https://www.npmjs.com/package/ng-pick-datetime for now.

[kaleksandrov]

@mathisscott, thanks for the information and the suggested workaround!

[whizkidwwe1217]

Will this component be available this year?

[mathisscott]

@whizkidwwe1217 Yes, version 1 should be available soon. Following on that, I would expect at least one more iteration sometime this year.

[KANekT]

@mathisscott You plan version 1 for Date & Time Picker in 0.11 or 0.12 or 0.13?)

[tangopt]

hi, it seems the current date picker only works in Chrome, is this known?

[michaelkrog]

@tangopt it hasn’t been released yet, has it? (Not according to the official documentation at least)

[tangopt]

@michaelkrog, apologies if I'm wrong, I though it was intended in https://vmware.github.io/clarity/documentation/v0.11/input-fields

Do you have a target date/release for v1?

[kglickman]

@tangopt That documentation just is for the styling of the native datepicker, which is supported differently on different browsers. A Clarity datepicker component is documented as "In Progress" on the Component Status page of the doc.

[marztierney]

Hey, when might this be released? I am very keen to use it in our project!

[b-mi]

I switched to angular material because I cannot wait so long for DateTime control.

[adibwoy]

@marztierney: We have a pull request out for the V1 of datepicker. It is currently being reviewed but I would say that the V1 is going to be released soon. The PR (https://github.com/vmware/clarity/pull/1980) has details and a link to the demo of the V1 datepicker.

The design has changed a bit and will be updated on this ticket soon.

[Kevin2iBi]

We are waiting for Datetime component!!

[ph55]

Regarding the range picker. http://www.daterangepicker.com/ is the best range picker in terms of UX in my opinion.

The concept of preset ranges along with custom range in same pop-up is very productive I think. Worth to implement.

[joshjohnsonux]

I agree with Alex in regard to the need for a date range selector and preset ranges. I will, however, note that the use cases will likely dictate people's affinity for various designs. In his case, it appears that ranges that span months are most common, hence the need for separate calendars for start and end and no concept of time.

In my case as a counterpoint, ranges spanning months are rare but granular times to the second are needed, hence this current design that only shows the calendar on date focus for either start or end, not both.

[jewway]

Do you plan to support range input , please ?

Thank you!

http://blueprintjs.com/docs/v2/#datetime/daterangeinput

[reddolan]

@jewway We have Date Range in the spec. It wasn't part of the v1 release. It will be in a future release

[gerald-gonzales]

Is it possible to change the size of the datepicker? I want to use it on a custom date filter on grid header.

[reddolan]

@gerald-gonzales there is no easy way to change the size of it such as a class like -sm or -lg. If it was able to change sizes, how would you see that happening? Would it be smaller, larger, longer, wider, etc?

[adumesny]

Is there a place to track progress on the Time picker part ? I'm interested in the analog version - up/down arrow keys doesn't seem like great UX, though the native android scrolling works well (which you mention so it's hard to tell from pic how it will behave of course) - and wondering if you've seen this one and if I should wrap angular around it for now: https://www.jqueryscript.net/demo/Android-Clock-Time-Picker-Plugin-jQuery

[adumesny]

FYI, we've been working on an interactive timeline range picker (part of FlyingDragon) some part of which may make sense to contribute back to Clarity as we have angular dragable and range slider which are very generic, and re-used above for time selection that Oren Trutner created.

[reddolan]

@mathisscott do we have another issue created yet for the time pickers?

[mathisscott]

@reddolan I don't think there's an issue for that yet.

[cdskill]

are we able to chose hours and minutes with the actual DatePicker from Clarity or it still a feature request?

[reddolan]

@cdskill that feature hasn't been developed yet

[RNACode]

+1

[ghost]

We will be able to have the date picker inline as a table to select instead of having an input where we need to click to popup?

[reddolan]

@mmarcelomartins we had discussed the idea of an in-page experience but found for the majority of use cases we researched, the input was the preferred method as it would be tied to a form submission. I would be curious to think how selecting and navigating though an in-page experience would work successfully.

@youdz thoughts?

[youdz]

I wasn't part of the in-page experience conversations, but if we decide we want to do it, it shouldn't be that hard to implement. I'd be curious to see use cases though, because you'll always want the input for both accessibility reasons and power users who just want to type the date in. So I have to agree with Red in that we would need to see a use case where the input with popover isn't the better experience.

[Dedme]

can you please allow us to set the Date Format? Out application/Client demands the very non-ambiguous 'DD MMM YYYY', this means from any location its 100% clear what the date is.

can this be a clarity Module definition that we can make as part of the import so that its consistent across the app? im sure many others would like the ability to configure their date independent of the 'locale'.

[gnomeontherun]

@Dedme Our implementation depends fully on the Angular locale setting for the application, and we just adopt it. We don't do transformation of it ourselves, so asking for a custom display is not something we're prepared to handle. Its not a simple ask for us to implement, but feel free to create a more detailed feature request and we can consider it separate from this ticket.

[jordanovi]

Hi team, any insight when this will be delivered ? I need a time selector component and prefer to use Clarity or what workaround would you recommend ?

[gnomeontherun]

This is not currently one of our top priorities, so we have no estimate when it will be picked up and worked on at this moment. You can see what we're working on by filtering issues for the 'in progress' or 'in review' labels. If you need to use a time selector, we recommend selecting a workaround for now.

[reddolan]

@jordanovi we also have a roadmap that outlines what we are working on and looking to work on in the near future: https://github.com/vmware/clarity/wiki/Work-in-progress

[KANekT]

@jordanovi I use https://github.com/DanielYKPan/date-time-picker

[whizkidwwe1217]

@KANekT Were you able to style that using clarity UI?

[KANekT]

@whizkidwwe1217 I don't use clarity styles for DanielYKPan/date-time-picker

[jrautenberg]

Horizon has a use case for recurring schedules where users are more interested in selecting days than dates. Anything like this in the works?

[reddolan]

@jrautenberg no, but you could build something exactly like this by combining a couple Selects and a Button Group

[jrautenberg]

Yeah. Awesome! I wasn't sure if that was ok with the team or not. Thanks @reddolan.

[mattmutt]

I understand time picker is currently not under consideration according to roadmap. For the official UX guidelines, are we to pick up these mock ups from two years ago and consider that as the direction and then implement our own time picker? Given that the concept of time occurs in every web app, we would like to correctly align with UX. From digital to analog to recurring time series with international time zones, it gets rather complex quickly dealing with sometime we take for granted: time. Looking for inputs before we step out and roll our own.

[mathisscott]

Hi @mattmutt Yes, these designs are the direction we still plan to go.

With the following caveats:

1) The digital-style display in AM/PM and 24-hour is our MVP 2) The analog clock style still has open questions that would make it a stretch goal or future phase deliverable. 3) Time range at this time would likely be a combination of two digital style displays either in separate form fields or inside a single dropdown panel.

If you would like to contribute back to Clarity, we can organize some time with the team to do a kickoff/planning. I'd recommend getting the clearance from your team to spend real work hours on it, though. Overall, contributing to Clarity in a meaningful way isn't much more of a hassle than building something that is only used within one product. The big difference is we are more likely to identify accessibility issues and framework issues up front – as opposed to those items coming back around towards the end of a release cycle.

[dkirrane]

Interested in this too. I'm currently looking for something like the Kibana Date and Time range picker. Where they have a drop-down and you can:

• Quickly pick a default date time range
• Relative to now Date Time range
• Absolute Date Time range

[midonlne10]

FYI, we've been working on an interactive timeline range picker (part of FlyingDragon) some part of which may make sense to contribute back to Clarity as we have angular dragable and range slider which are very generic, and re-used above for time selection that Oren Trutner created.

i need this

[typhoon1978]

Great stuff!!! I need this too...

[AbhishekShrivastava]

I am also looking for this component. It would reduce some of the manual codings we are doing to achieve the same.

[brunofjesus]

FYI, we've been working on an interactive timeline range picker (part of FlyingDragon) some part of which may make sense to contribute back to Clarity as we have angular dragable and range slider which are very generic, and re-used above for time selection that Oren Trutner created.

i need this

How can I implement this?

[adumesny]

the above time slider is part of a vmware internal library (FlyingDragon). If you're an employee ping me up. It uses Angular for the bare dragable range slider, and D3 for the time axis and such.

[brunofjesus]

the above time slider is part of a vmware internal library (FlyingDragon). If you're an employee ping me up. It uses Angular for the bare dragable range slider, and D3 for the time axis and such.

I don't work for vmware, but I guess I can do something similar. Thank you! :+1: