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

[KlausEichinger]

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

[ChristianWeyer]

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.

[neoswf]

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

[wknet123]

So cool!

[reddolan]

@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

[reddolan]

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

[ChristianWeyer]

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

[AndersonDev]

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

When we can expect this?

[wodCZ]

Hello,

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

Thank you!

[joshjohnsonux]

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.

[joshjohnsonux]

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.

[ChitMeng]

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.

[joshjohnsonux]

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?

[edwardchanjw]

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

[adibwoy]

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

[alobban]

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

[adibwoy]

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

[reddolan]

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

[peteski22]

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

[mathisscott]

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

[adibwoy]

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

[kglickman]

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.

[youdz]

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

[kglickman]

Perfect.

[coldhamix]

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

[mathisscott]

What do you mean by "near future"?

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

[jacobbutton]

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

[mathisscott]

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

[michaelkrog]

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? :-(

[reddolan]

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

[michaelkrog]

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

[joshjohnsonux]

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

[michaelkrog]

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

[jacobbutton]

Any update on development progress on this?

[mathisscott]

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.

[coldhamix]

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

[mathisscott]

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

[coldhamix]

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

[gnomeontherun]

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

[jacobbutton]

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

[coldhamix]

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

[b-mi]

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?

[mathisscott]

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

[jacobbutton]

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

[b-mi]

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.

[mathisscott]

@jacobbutton Yes, I believe that to be the case

[mathisscott]

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

[b-mi]

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.

[kaleksandrov]

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!

[mathisscott]

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.