feat(datepicker): add support for choosing time

[mmalerba]

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

[hawthorner]

If there is no estimation on when this might become available, can anyone recommend a date/timepicker to use in the meanwhile?

[mmalerba]

We're probably not going to have time to work on this until 2018. One possibility in the mean time is to use the datepicker for the date component and a select box or group of select boxes for the time component.

[hawthorner]

Ah cheers for the heads up. I'll do that. Seems so obvious I'm not sure why I didn't think of it. :)

[vwchu]

I found this possible temporary implementation (until an official version is released):

• http://code.promactinfo.com/md2/#/datepicker
• https://github.com/Promact/md2/tree/master/src/lib/datepicker

[WaterBleu]

Im currently using https://github.com/vlio20/angular-datepicker
at the moment. I really wish team can get this down ASAP.
Reason being I really dont like the clock lol

[torabian]

I have just created a repository to give users ability to choose time, based on material 5 and mat-dialog.
Here you can see:

https://owsolutions.github.io/angular-material-clock-time-picker/
https://github.com/owsolutions/angular-material-clock-time-picker

Is there any specific way to merge this repository into material itself?

[matheo]

I've built a complete DatePicker with time selection forking the official module, but got no answer from @crisbeto on LinkedIn to know how to contribute it

[fxck]

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.

[torabian]

We have the implemented a fully working version now. All bugs are fixed, and working fine with angular 5 material. Please check these before:
https://owsolutions.github.io/angular-material-clock-time-picker/
https://github.com/owsolutions/angular-material-clock-time-picker

[fxck]

@torabian this issue is about integration of a timepicker into the datepicker, so you can choose date and time in the same input / model, rather than having to manually join them after the fact..

[matheo]

We did that: https://www.youtube.com/watch?v=ZSM_GxfFahg
It 's not perfect but does the job quite nicely, it took some time to get it working and move on to the next task.

[chrisonline]

@matheo Wow great! Is there any way I can use this too in my project?

[fxck]

@matheo yea, but then again, there components like that already http://code.promactinfo.com/md2/#/datepicker (change Picker Type to date time) and they have the same problem as yours will likely have, and that is duplicating / forking datepicker functionality, since it's not quite reusable / extendable (especially the input part).

[zhan3333]

I believe that. the amount of reactions and the longevity of this issue speaks for it to be a

In the mean while we can use the native implementation of <input type"datetime-local" />

Won't work out the box but needs to be hacked with a click event

<mat-form-field>
  <mat-label>Hello</mat-label>

  <input type"datetime-local" (click)="helloInput.showPicker()" #helloInput />

  <mat-icon matSuffix fontIcon="today" />
</mat-form-field>

Note support: https://caniuse.com/input-datetime

This example is more complete:

<mat-form-field (click)="helloInput.showPicker()">
    <mat-label>{{'Send datetime' | translate}}</mat-label>
    <input type="datetime-local" matInput #helloInput [formControl]="datetime"/>

    <mat-icon matSuffix fontIcon="today"/>
</mat-form-field>

The result of datetime is a time without a time zone, such as 2023-11-27T23:54. You can use your favorite time formatting tool to make it with the specified time zone, or use another select to let the user select a time zone.

moment(datetime.value).toString() // Mon Nov 27 2023 23:54:00 GMT+0800

This seems to be the only way to keep up with Angular version updates right now.

[sp90]

Not a big fan of using a thirdparty lib for this though; i would probably use something like a smaller function to transfer back and forth :)

[anisabboud]

Related:

• https://material.io/blog/24-hour-clock-design-research The 24-hour Clock Design
• https://m3.material.io/components/time-pickers/overview

[airtonferreira]

02/27/2024 :')

[hpzudo]

I think I'm gonna apply for Google's jobs just to develop this xDD

[umangvgrubbrr]

02/27/2024 :')

03/27/2024 :')

[zhan3333]

This is a p5 priority requirement and after 7 years no progress has been made. Maybe the angular team never chose the time scenario 😀

[fudom]

This component is a part of the Material design. And this is the official Material implementation for Angular by Google. Weird that other frameworks have already implemented it, except the one that defined the specifications. Just a fact or observation.

I would be satisfied with a number input for the time if the implementation of the graphic clock circle is too complex. This can be a part of the date picker. Supporting located time (12/24h).

I'm wondering why no member of the Angular team is commenting on this highly rated issue. I doubt a PR will be accepted, won't it? Here are some links that might be helpful:

• Material Design Time Picker Specs: M3, M2
• 3rd party library: ngx-mat-timepicker, ngx-material-timepicker
• Implementation in a framework libary for Vue: Vuetify time picker
• Implementation in Ionic. Not by MD specs, but combined with the date picker as a select input: Ionic date/time picker

The analog clock circle looks interessting, but should not be a blocker for the implementation of a time picker. For me a simple input like this (gif above) would satisfy the request.

[luii]

@fudom One main concern i have with the time picker is, that not every part is accessible to all users, there are many libraries (including the ones you posted) and most of them dont even consider accessibility. M2 and M3 were initially, afaik, only designed to be compatible with mobile devices, hence why most of the designs only depict mobile screens. Now scaling them up or adapting them to desktop devices comes with the challange, of supporting technologies like screen readers and figuring out when they're active and when to activate a dial face or a input face on the timepicker. I think there are still things that need to be put into consideration for everything to work.
Just keep in mind that they're working on alot of stuff and some fixes/request need to be implemented first to support different technologies that, like in this case, could be needed before things like these get implemented

[fudom]

I just crafted a rough simple prototype. Not yet ready to use. Only for demo / inspiration / workaround.
The analog clock etc. should not block the implementation. A simple time picker, at least as a temporary solution, is sufficient. Better than nothing. Like shown in my last post above (gif). But ok, maybe not acceptable for the official Angular Material...

▶️ Stackblitz Demo

[luii]

@fudom See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local

this is already a native implementation of your approach, i think it would be easier to adjust the styles (if any need to be made) on it.

[schase-nfocus]

@luii - you mean like this? https://mui.com/x/react-date-pickers/date-time-picker/

[fudom]

@luii The native input is no option for several reasons. Styling doesn't work well everywhere. Especially native popovers. And it looks and behaves different on every browser. For example, in Firefox I don't see the time picker. Therefore I wanted to craft a component using the existing framework without dependencies or experiments (gamble). I could just use the native input. But mixing UI frameworks looks ugly and amateurish. The developer has no control over the functionality of the app and the user interface.

Browser	Result
Chrome
Firefox

Good luck to style this to match the Material Design. :D It's definitely not easier. It's impossible.
Anyway... The Angular team should just reconsider / reevaluate this.

[angelaki]

Coming from the deprecated https://github.com/IliaIdakiev/angular-material-timepicker I landed here hoping for a mature solution. Most of the 3rd parties out there keep the value type "string" so I'd need to heavily adopt my projects. Since the timepicker even is part of Google's Materia Design and the MDC-based components are pretty close to it, would it really take that much effort to please the community with this component? P5 feels so sad ...

[JelleBruisten]

Not sure if it was mentioned before between all third party solutions but my current company uses this one:

https://ng-matero.github.io/extensions/components/datetimepicker/overview

https://github.com/ng-matero/extensions?tab=readme-ov-file

However some specific usecase has a need for setting timezone on a datetime picker, we are not using the local system's timezone or utc time. But very specific timezone. So we created a wrapper around this which interacts with the adapter for luxon since we are using that.

Until a solution from the angular team which which does not seem to be a priority, I suggest look at the solutions that are posted or create your own..

[angelaki]

Not sure if it was mentioned before between all third party solutions but my current company uses this one:

https://ng-matero.github.io/extensions/components/datetimepicker/overview

https://github.com/ng-matero/extensions?tab=readme-ov-file

However some specific usecase has a need for setting timezone on a datetime picker, we are not using the local system's timezone or utc time. But very specific timezone. So we created a wrapper around this which interacts with the adapter for luxon since we are using that.

Until a solution from the angular team which which does not seem to be a priority, I suggest look at the solutions that are posted or create your own..

Yeah, that one actually seamed to be the most mature for now. Was already thinking about it, thank you for mentioning again! :)

[Chudroy]

can we get this feature, please? bit ridiculous this issue was opened 7 years ago. is it that much of a hassle?

[AlexElin]

Material Design has been having the Time Picker since M2 (see the links in #29046).

@crisbeto, Is Angular Material team going to implement it?

[fomin-grigorich]

Really need this feature! Please, provide us this solution. The community is tired of solutions that are not working in some of the ways.

I thought I found a good one, but unfortunately it's not working well with MAT_DATE_LOCALE: 'no'. https://ng-matero.github.io/extensions/components/datetimepicker

[philmayfield]

I'd love to know if this was truly P5 (acknowledges request but no plans to address) and if so what the official guidance is for choosing a date and time.

[mseltene]

Hey, guys. I've created mat-timepicker based on material design. I was wondering if you can have a look at it. There is lack of demo and docs but I'm working on it.

This is amazing work @dhutaryan. Thank you for coding this. I think Angular Material team should integrate your work. Are you also thinking about [mat-datetimepicker]?

[airtonferreira]

@mseltene awesome! Looks like very good alternative.

[mseltene]

@mseltene awesome! Looks like very good alternative.

Hi, @airtonferreira. Thank you. I just want to clarify @dhutaryan is the awesome maker of this.

[airtonferreira]

@mseltene oh, I'm sorry. I got confused. Congrats @dhutaryan

[dhutaryan]

@mseltene @airtonferreira thank you guys. Do my best 🙂