Clarity: Date & Time Picker component (new)

Created on 10 Feb 2017  ·  121Comments  ·  Source: vmware/clarity

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

date picker

  • 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

month year pickers

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

date range picker

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

digital pickers

  • 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

analog picker

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

date time picker

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

quick picker

References

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

Documentation is subject to change

@clangular Epic forms enhancement request design new component ready

Most helpful comment

@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.

All 121 comments

Great stuff, can't wait. What about a analog timer w/ 24h setup ?

Nice!
Will the components try to fall back to the native implementations e.g. on mobile (iOS, Android)?
This would be great as mobile users just expect the native pickers, I guess.

Looks amazing! Can't wait to see it in the project!

So cool!

@KlausEichinger yes, the analog Time Picker will have a 24 hr experience

Time Picker recognizes locale and selecting PM will change hour values to 24 hour values

@ChristianWeyer My preference would be to use the Clarity pickers for efficiency and consistency. I also believe that product teams will have much greater control with Clarity pickers vs native OS ones. This is something that we'll be looking into more though. This goes beyond mobile OS's, it also affects Chrome. Chrome has a native date picker when you use the input attribute of "date" and this would also cause collisions.

Ah, then we and our users have to agree with you that we disagree ;-)
Thanks for your explanation, though.

Wow! Guys you so cool. I hope this project will be live during a long time.

When we can expect this?

Hello,

in our application we use input type="month", specification here - do you plan to support this too, please?

Thank you!

As this gets implemented, engineering should consider extensions of the digital time picking model to include seconds and milliseconds. I don't think they're common enough to warrant inclusion in the base component, but may be needed regularly for technical applications. Other item to consider also is the inclusion of timezone. examples would include travel applications or applications utilizing global resources where specifying GMT might be helpful.

Also forgot to include one other want: Time Duration. This design only includes the specification of a point in time, but it's often useful to specify a duration. ex. booking conference room time.

We want to incorporate some pre-sets for the date range picker. It seems work better with a tandem calendars as we can show the presets on the side. Would like to know how to solve it for the one calendar style as well.

Just noticed one thing: Calendar display currently shows 5 weeks worth of dates, though there are cases when a month can span 6 weeks (1st on a Sat). Will the calendar control grow to accomodate another week/row, or will the text of the calendar shrink to fit the extra week/row?

The references style(corporate style) look so alike with Office Fabric's DatePicker,

Microsoft Office's Fabric does't not developed their own, they are using the jQuery Pickadate. The plugin seem to inspired by mobile interactions

What would v1 include?

  • Basic Datepicker
  • Month Selector
  • Year Selector

Features to implement after v1 is done:

  • Date range picker
  • Date + Timepicker
  • Quick Picker (Ability to pick from a small set of values)

API:

Basic:

<input type="text" clrDate/>

We are going to use @youdz's method to create a wrapper around an HTML element having a directive. Demo here: https://plnkr.co/edit/Gig7IN66kZkVvdpqZ6xP?p=info
In this case, we will use the clrDate directive to create a wrapper clr-datepicker-container around the <input type="text"/>

Advanced:

<clr-datepicker-container>
    <input type="text" clrDate/>
</clr-datepicker-container>

The clr-datepicker-container would be used to add additional inputs to support features in v2 like date range picker which is not supported natively.

_Note: API is tentative and might change as the development progresses_

So will users have the option to type their inputs as well? I didn't see that expressed in the documentation.

@alobban: Yes. Mostly through an Input on the clrDate directive.

@alobban there is a mention of this "manually typing a date value into the input field will change in the Date Picker"

Any idea if Date Range Picker could have from (date) to (date || 'on-going' / null)? Failing that a nice way to link two date pickers together, so selecting a date in A would prevent B from having a date earlier than that. Also this could have the to: on-going/null.

Is this component actually available? confused EDIT: I see on the docs page that it's still not started :(

Thanks

@peteski22
Thanks for checking in! Our date range feature is slated for _after_ the initial release of the date picker. The initial release will be an MVP datepicker component.

As for the ability to easily link datepickers and disable ranges in a datepicker... I don't know if that is part of the MVP or not. @adityarb88 would be able to answer that.

@peteski22: I don't believe version 1 of the datepicker will have the range feature but we do plan on adding that feature later on.

Please be sure that we can provide the desired locale or that it will use the locale in the html lang attribute and doesn't just use the browser's locale.

We will use the locale configured with Angular itself (there is a LOCALE_ID provider), to ensure consistency with the app.

Perfect.

Is there any chance of getting this done in the near future?

What do you mean by "near future"?

It's one of our top priorities and is being actively worked on this week.

Any estimate on release date or what milestone this will be added to?

@jacobbutton
This is currently under development but due to i18n and a11y requirements is a ways off. Due to the fluid nature of our planning/prioritization, we avoid giving hard ETAs.

That said, I would not look for this to land before November. Just going off of where the development is and what remains to be done.

yes, the analog Time Picker will have a 24 hr experience
Time Picker recognizes locale and selecting PM will change hour values to 24 hour values

@reddolan But most people that uses 24-hour clocks have no clue what AM/PM is? :-(

@michaelkrog It is my understanding from talking with people using 24hr time, that use an analog watch, can do this quite easily. @youdz you and I talked about this a while ago. Can you shed some perspective on this?

@reddolan To be honest I can only speak for the area I am in. I’m placed in Denmark.

Here we have a lot of American influence through television and are taught a lot in school about America. That makes the younger generation aware of something called AM and PM, but we are not always sure if it’s After Midday and Past Midnight or the other way around. ;)

If I ask my mother(67 years old) what AM and PM is, she would have no clue. Some in that generation might know about it, but far from all.

24h analog clocks aren't new, though making them interactive may require more precision from the user.

...or perhaps the AM/PM labels could be internationalized. Here in Denmark I figure Morgen (Morning) and Aften (Evening) could make sense.

Its nok like people here don't know of 12 hour clocks(we have wrists too). It's more the terms AM/PM that are very unfamiliar.

Any update on development progress on this?

Hi @jacobbutton
The datepicker is still in development. We've had to address some internationalization and accessibility issues, as well as form factor issues, of late. This is delayed things somewhat but we feel it will result in a stronger component and fewer breaking changes in the future.

@mathisscott Would it be possible to use this component without inputs and dropdowns, like in calendar mode?

@coldhamix
Being able to use the calendars on their own Is not something that we have currently scoped for version 1 of the date picker.

What use case are you trying to solve by using the calendars of the date picker in this way?

@mathisscott I just wanted to have something like a calendar widget for dashboard

@coldhamix That sounds like a different use case, and you could implement that separately using the design patterns in this ticket.

I have every intention of using this clarity component once it's available, but my project is in a stage of development where I really need a functional datetimepicker to move forward.

I've tried many different third party components but they either didn't work, or they conflicted with clarity in such a way that made them unusable.... until today.

Today I found https://www.npmjs.com/package/ng-pick-datetime

This is compatible with clarity, angular4, and webpack and it works out of the box.

Hopefully if anyone else out there is in the same boat as me, this might be able to tide them over until the clarity datetimepicker is ready for release. And now I guess I can stop hounding @mathisscott about development updates. 😄

@gnomeontherun well, most major datepicker implementations (including the one mentioned in comment above) include inline mode. It might be a nice to have feature for Clarity too.

jacobbutton - thank for tipfor Clarity comaptible date control. I wait for Clarity date control too, it should be published in november - I think. And - does https://www.npmjs.com/package/ng-pick-datetime support reactive forms?

@b-mi
As we work through some issues related to i18n and a11y, our effort for the datepicker is getting pushed out. November is not likely.

Will the datepicker be able to pop outside of modals if need be? Because it should be able to without clipping issues.

mathisscott - I would like to say, that Clarity without Date control is not usable in real application, because default date input control implementation in browser like Firefox and some other browser is unacceptable.

@jacobbutton
Yes, I believe that to be the case

@b-mi
Thanks for the feedback. I will note that there are dozens of real applications using Clarity right now.

That said, the datepicker is in development right now. There is no higher priority that we can give it.

Thanks.

There are a lot of problems with use of another date picker controls. Now it looks we have to change all input controls to google material.

Hi @mathisscott,

Can you give more details on the work that is going on - ETA? What is going to be delivered - the whole feature or just some parts? If so, which parts?

Thanks!

Hi @kaleksandrov
Version 1 of the datepicker is going to be the input that opens a calendar from which a single date can be selected.

What were you needing and when were you needing it by? I might be able to give you an idea of if it can be expected to be ready for your case.

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!

@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.

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

Will this component be available this year?

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

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

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

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

@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?

@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.

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

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

@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.

We are waiting for Datetime component!!

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.

image
image

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.
screen shot 2018-03-14 at 1 25 18 pm

Do you plan to support range input , please ?

Thank you!

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

image

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

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

@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?

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

time_range_picker
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.

range

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

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

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

@cdskill that feature hasn't been developed yet

+1

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?

@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?

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.

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'.

@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.

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 ?

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.

@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 Were you able to style that using clarity UI?

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

Horizon has a use case for recurring schedules where users are more interested in selecting days than dates. Anything like this in the works?
screen shot 2018-10-18 at 10 20 08 am

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

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

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.

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.

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

image

time_range_picker
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.

range

i need this

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

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

time_range_picker
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.
range

i need this

How can I implement this?

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.

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:

Hi, i am looking for date picker month view for a long time, is there any workaround solution for this ?

I hope a time and datetime picker will be implemented soon...

Added a11y tag - needs to be assessed re: WCAG 2.1 particularly ranges and analog time picker.

Can we please have the implementation of the time picker to be considered for the next release.

@mathisscott How use only year or month for choice? It's posible ?

We have some design work to do on the time picker, but I've got my eye on it as part of a form improvement epic.

Can we bump the priority for the Date Range Picker? We at the VMware vSAN team are currently forced to either use a custom date picker or limit some functionality because currently, the Clarity picker doesn't support ranges. Thanks!

@lpetkov The current recommendation for a range is to have two date pickers. Does that limit your functionality? If so, please reach out to me and let's talk more about your use case.

For the time picker, should we also have "reset" option to reset the time back to the current time. For Date, we always know the current date because of the bolder font but in case of time, if we change it by a few hours/minutes, then we have to close/open to reset to the current time. Would having a "current time" or a "reset time" button
GitLab-Example-Reset
below the time picker help ?

I think it's high time we prioritize the Time Picker component because both of the Date and Time Picker go hand in hand.

Most use cases, we have configurations of date with a specific time.

Its not currently prioritized for our workload. Is it a feature you are interested in contributing?

Any updates on a time picker component making it into Clarity soon?

I recently started looking into creating & contributing the time picker (for now) component myself.

Its not currently prioritized for our workload. Is it a feature you are interested in contributing?

Are you still looking for external contributions to this?

Hey @martinbrom. Thank you for the interest in this component. Because this would be a large contribution I want to make sure you are aware of our Contributions Guidelines and specifically the Angular coding guidlines.

If none of this sounds to daunting for you The first step is to fill out the proposal template. For things like:

  • What is the change?
  • What is a use case for this change?
  • Why should it go in Clarity?

I'm ok if you just link to this issue.

What will really get the ball rolling is to spend some time on the Examples and API. There won'tbe a pure htmll/css part for this so that could be skipped but providing your best estimate for both the implementation plan details and the conclusion section would facilitate our initial discussions.

Here is a link to the New Issue: Contribution Proposal, thats where the proposal template should be filled out and we can then discuss the implementation details there.

Hi everyone,
any updates how to proceed with this rather huge topic?

The reason I stumbled once again upon this ticket is a feature request to show calendar week in the datepicker.
I've created an own ticket for it: https://github.com/vmware/clarity/issues/5273

I'm unsure if it is necessary to be considered also within the scope of this feature, probably not when only building upon existing functionality.

Anyways the designs here really look great - it's really a pity this ticket hasn't made it into Clarity yet - I think this would be a great addition and distinguishing feature for Clarity compared to other Design Systems!

Any updates regarding only year selection?

any updates?

This is a large issue that is hard to complete due to the complexity of requests all inside of this one issue. These are difficult to accomplish everything while retaining full accessibility, customizability, and localization. There are various workarounds and solutions people have come up with, and we're glad people are unblocking themselves.

The feature request here has been captured into our list and we’re going to take it into consideration as we develop Clarity Core capabilities. In an effort to clean up our backlog and focus our attention, I’m going to close this as captured in our feature requests. Please follow our development and releases to see when we release relevant components to make this possible. Future feature requests can be made in our GitHub Discussions.

Was this page helpful?
0 / 5 - 0 ratings