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.







Documentation is subject to change
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?
Features to implement after v1 is done:
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.


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.

Do you plan to support range input , please ?
Thank you!
http://blueprintjs.com/docs/v2/#datetime/daterangeinput

@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

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.

@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
@jordanovi I use https://github.com/DanielYKPan/date-time-picker
@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?

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

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
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.
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?
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...
@morris4ever69 hardly soon
see https://app.zenhub.com/workspaces/clarity-5829bbc3b399ebbf183145bf/board?labels=new%20component,epic&repos=69590701
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

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:
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?
Maybe this is helpful for some people in the meantime.
https://stackblitz.com/edit/clarity-v4-dark-theme-clr-core-test?file=src%2Fapp%2Fapp.component.html
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.
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.