feat(datepicker): add support for choosing time

[mmalerba]

Should be able to choose, just date, just time, or date & time

[fxck]

besides request's ,what other options do we have?

using some other lib?

[am-awais]

besides request's ,what other options do we have?

using some other lib?

I tried all but none of them suits with angular material design if you have any, suggest me then!

[Splaktar]

@am-awais there are a number of community time picker components linked in comments above.

Please keep in mind that the team builds open source software that you are free to use, but you don't pay for that software, so you don't get to give orders on what/when/how/etc. Please try to keep comments constructive and useful to the many people (49) who are subscribed to this thread.

Posting another link to a community time picker option is useful. Complaining that this isn't implemented yet or demanding an ETA is not useful.

If some community component is close to what you need, but not perfect, please inquire in that repo about how you can help send PRs and add the functionality that you desire.

[Agranom]

@am-awais try this one https://github.com/Agranom/ngx-material-timepicker

[RockAlex]

any roadmap in view?

[Tian-Hun]

Found it The maintainer is asian I think (README english is not the best, but understandable), but it can be an interesting starting point. Then Angular Material guys can decide to copy stuff from there, make it better and release it in the official repo. Dunno how this can be help when dealing with enhancements to already existing components. Eg. see ignored PR for Edge fix here which requires to change code inside SDK. I'm not usre it's possible to manage it via inheritance, for example

@IlCallo I am the maintainer of this repo, I am very glad that you found it.

[amoscatelli]

I am also interested in this. I don't really like the third party libraries I tried so far. This is really common use case so I am very surprised this isn't covered yet.

[woteska]

Any update on dateTimePicker?

[sethigoldy]

Yes, we really need this feature. Let me know if I can help.

[melroy89]

Come on, please yes!

[h2qutc]

I have just create a Datetimepicker like @angular/material Datepicker by adding support for choosing time. Hope that it's useful for you.

https://github.com/h2qutc/ngx-mat-datetime-picker

[joaodforce]

I have just create a Datetimepicker like @angular/material Datepicker by adding support for choosing time. Hope that it's useful for you.

https://github.com/h2qutc/ngx-mat-datetime-picker

This is great Lib, it is very Angular Material Compliant, the only issue is that the TimePicker doesn't support formControl.

[h2qutc]

@joaodforce the lib ngx-mat-datetime-picker is now updated (v2.0.2) with supporting formControl.

[sanyashvets]

don't know what is the reason of missing such a standard functionality :(

[melroy89]

Looking through all the comments. I think it's blocked due to the process. Since we are basically missing a material spec document. Before it gets accepted and merged.

[odahcam]

This is open for so long that I could learn React and now am gladly using Material-UI's time picker.

[joaodforce]

This is open for so long that I could learn React and now am gladly using Material-UI's time picker.

The time picker from the lib you linked to is absolutely terrible for desktop. This is one of the reasons this feature is on hold for so long.

There are many other libs that copy that style, even for angular, but copying android's native time picker is not the solution.

I'm using the one from this Angular Material Components lib. which is much more desktop friendly.

Also I think recommending a library for a totally different framework is not very helpful in this context.

[d-koppenhagen]

@joaodforce I totally agree!

Please keep in mind that Angular is open source and you can always try to help and contribute. So don't be so fussy. A time-picker seems to be very simple first, but there are many things to keep in mind (integration within other components, a11y, style, layout, responsiveness, behaviour, i18n, ...)

• ✅ Note your expectation from the feature
• ✅ Note possible edge cases one should consider when implementing
• ✅ Discuss the feature
• ✅ Give examples
• ✅ Note use cases
• ✅ contribute (also on existing issues as it will help the team sometimes to focus on this feature request)
• ❌ make pressure
• ❌ blame
• ❌ smile at the process and the time it takes
• ❌ comment that the you are "still" missing this feature
• ❌ ask continuously about the state

[odahcam]

The time picker from the lib you linked to is absolutely terrible for desktop. This is one of the reasons this feature is on hold for so long.

At least there's one and I can choose where to show it or not, I can still detect mobile vs. desktop and choose what component to show to my users.

Also I don't think recommending a library for a totally different framework is not very helpful in this context.

Of course not, but 3 years... You can learn a new framework in 3 weeks. I usually support the guys in here, but I'm using and trying to contribute for the past two and a half years and I only receive angry replies and no friendly support, I'm tired, sorry. No one born a senior Angular UI master internationalization accessible components engineer.

Please keep in mind that Angular is open source and you can always try to help and contribute.

There's actually lots of folks trying to contribute, but I don't see repo maintainers interest.

(integration within other components, a11y, style, layout, responsiveness, behaviour, i18n, ...)

Yeah, but the majority of users don't need it or don't even know what this is about. A simple version laballed experimental would already make hundreds of users happy. Happy people help more and complain less. I think some things in here are a bit over engineered, at the end they have lots of bugs like any other mediocre component.

---

I've been on the repo's side for long, you can hate me for that, or dislike the comment or ban me from here or whatever, but it's just honest feedback (a word that should be more respected in here).

But sorry, I'm in no position to criticize anyone in here, I mean, I could, but I won't. I used to hate React and I am not recommending it, just commenting that I using it. Sorry again for my inadequate position in here. I don't intend to offend anyone nor spam this thread with off topic matters (~no one is trying to solve the problem anyway~ actually sorry, there's lots of folks in here doing an awesome and underrated job). @d-koppenhagen you are absolutely right! This should be stamped in GitHub's home. Good luck and have fun guys.

[johannesjo]

@d-koppenhagen is somebody working on this, or is it ripe for the taking?

[d-koppenhagen]

@johannesjo What do you mean exactly? Working on what? On this issues here? I can't tell you the state of it and when it got faced by the angular team

[johannesjo]

@d-koppenhagen I was wondering if somebody is working on this feature at the moment at all. I am curious because this being open source would mean that somebody else could offer help with this. It feels a bit stupid that everybody rolls out their own take on this, while we could be working on this together here.

[ofirrifo]

in addition to time picker it would nice to have

1. time zone picker alongside the time selection
2. support ng-content slot within the <mat-datepicker></mat-datepicker> or pass templateRef in order to extend the mat-datepicker with any needed html
3. an option to move back to current date. could be a button or link

[francovp]

Google Cloud Platform has his own Datetime Picker. That platform uses Angular and Material isn't ? And it's from Google. Maybe the GCP team can make it? I don't get it

Also has a timezone picker

[Totati]

(I'm going through the highest voted issues today an commenting on their status)

For time-picking, it's absolutely something we want to do, but it's a pretty large undertaking. Some of the work includes:

• Having a UX design that satisfies users both inside and outside Google (the Material Design team does not have any kind of spec for this yet)
• Having a design that works for both mobile and desktop (e.g. the whole Android "clock" UX is not desktop-friendly)
• Dealing with i18n , especially around timezones
• Dealing with level of precision (minute, second, etc.)
• Supporting date + time picking in one UI without making the datepicker's payload larger if you're not using the time parts

This probably won't be coming in 2019, but in the short term I will start having more discussions with some of Google's designers about future plans for this.

https://material.io/components/time-pickers

[woteska]

https://material.io/components/time-pickers

Whut? Is it a new thing?:)

[joaodforce]

I think the Material Spec for that is kinda new yes. With the spec on hands the final time picker can be developed according with it.

[princemaple]

It simply ignores 24hr exists?

[PowerKiKi]

The lack of support for 24 hours format is both very surprising and disappointing.

According to CLDR data, 100/186 locales use 24 hours format (+53%). Not only that but the default format for "all others" locales also is 24 hours format.

Wikipedia visual representation makes it easy to see that most of South America, Europe, Russia and Africa is being ignored by this design:

I hope that the Angular team will not ignore the majority of end-users. Or better yet that the Material spec guys will amend their specification.

Also see why am/pm system could be argued to be not so great, or at the very least confusing for many people.

[joaodforce]

maybe it is just an oversight on the spec. It really should not be ignored, considering how the datepicker is very detailed and universal. The TimePicker should have the same attention.

[billbrinck]

Any news here ?

[haoolii]

Any news here ?

I hope timepicker can be implemented. :((((((((

[Lonli-Lokli]

@h2qutc does your library supports other adapters except for Moment (which should not be used), eg dayjs/luxon/date-fns?

Or at least be able to consume custom adapter, same as angular material does?

[h2qutc]

@Lonli-Lokli Yes, you can create a new custom adapter by inheriting abstract class NgxMatDateAdapter as Angular Material does. Something like that: @Injectable() export class NgxMatNativeDateAdapter extends NgxMatDateAdapter<Date> {}

[linchers]

I hope timepicker can be implemented.

[newmanw]

With the addition of https://material.io/components/time-pickers, is this getting a bump in priority?

[chacabuk]

I can't understand why this necessary component doesn't exist yet?

[DerHerrGammler]

Any Updates on this? Me and my company realy want this and not a dirty workaround.

[HolzmannSpace]

[itayperry]

Any news regarding this feature? :)

[terryjiang2020]

So nobody has time to work on this even in 2021? Can we talk to Google somehow or set voting for it?

[Gaiidenn]

Boys, we are actually in 2021, why don't you just use native html input date, time or datetime-local inputs directly?

Here is a lil plunker as a quick exemple : https://plnkr.co/edit/DtENB2CXpYF7oWwS

Feel free to process the returned string(s) with native javascript datetime library or Moment.js

PS: After some checkup, prefer use both date & time input types for Firefox compatibility

[fxck]

Maaaybe for the same reason you don't use native input, selects, buttons?

[newmanw]

@Gaiidenn, @fxck is right, native html input date provides no material styling. It's 2021, why would we design an entire page/application around angular's material design only to leave out certain components like a datetime picker?

[francisrod01]

Boys, we are actually in 2021, why don't you just use native html input date, time or datetime-local inputs directly?

Here is a lil plunker as a quick exemple : https://plnkr.co/edit/DtENB2CXpYF7oWwS

Feel free to process the returned string(s) with native javascript datetime library or Moment.js

PS: After some checkup, prefer use both date & time input types for Firefox compatibility

I think this website isn't working appropriately, so I took the liberty to replicate this project on Stackblitz.

https://stackblitz.com/edit/angular-datetime-picker-ivy

In my opinion, I could use the native datetime-local input for sure, because it covers the whole needs, not just part of it.

[HolzmannSpace]

@francisrod01 @Gaiidenn you two can not be serious!

Your solution does NOT work in other browsers (like firefox 84.0.1 (64-Bit)). Also the native html solution does not provide any theming!

In Safari, there are not even ANY native html implementations for that:

This issue is about a material component and not a question how to not use material.

[francisrod01]

Google Cloud Platform has his own Datetime Picker. That platform uses Angular and Material isn't ? And it's from Google. Maybe the GCP team can make it? I don't get it

Also has a timezone picker

This one would be awesome!!

They won't accept contribution on this. Big changes like this need to have a design doc first and need to follow the official material design guideline (and the version that is currently publicly available doesn't even have datetimepicker for desktops). Just release it as a third party component.

@Tjommel1337 I think you haven't read this yet. Like you, I'm here waiting for some news about it. Just saying.

[DerHerrGammler]

@francisrod01 There is already a documentation on the officel docs: https://material.io/components/time-pickers

this doc exists since years but this issue still get no progress

[fxck]

That's for mobile, not desktop, also design doc he's reffering to is different from that design doc.

[hennihaus]

Hey, I am shocked that this feature does not exist in 2021 and we reached Angular version 11.