feat(datepicker): add support for choosing time

[mmalerba]

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

[fxck]

@mmalerba any time frame on this?

[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. :)

[e-cloud]

@mmalerba time-picker is not even on the plan list. No affense, but it seems to almost half a year to when it comes up. What's your team's major work for now?

[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

[sonnh58]

@vwchu does it works with angular v4 now ?

[vwchu]

@sonnh58 I haven't used the md2 package in my latest projects recently, but from a quick glance at the Issue tracking, I believe it does.

[ChenReuven]

@sonnh58 yes it work on angular v4.

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

[matheo]

I had to do my own plan and I've followed the official material design (https://material.io/guidelines/components/pickers.html) perhaps I had to implement it on the modal only. Currently I don't have too much time to publish it but I will try to.

[fxck]

Those guidelines you linked are for phones / old revision.

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

[fxck]

I created my own version by forking material datepicker as well so I know what I'm talking about, it's not easy to keep up with changes of datepicker / overlay services.. it's simply a huge pain in the ass and I wish they would work on the official version soon.

[matheo]

@fxck Indeed, my fork is almost two months old (pre-5.0) and it's a pain to think about syncing it to the latest code. It would be nice to have a word from @crisbeto to figure a solution that benefit all of us. My code is clean and it would be good to try to merge it into the official module.

[kuhnroyal]

I took the Promact Md2/Datepicker and refactored it to depend on material. Added theming support and a native/moment adapter which mostly delegate to the existing material date-adapters except for time functions. It is not published but you can test it out locally or publish it to your private NPM registry. The latest commit is based on 5.0.0-rc.3.

https://github.com/kuhnroyal/mat-datetimepicker

[chrisonline]

@kuhnroyal Wow great. I will wait once you have published it ;-)

[kuhnroyal]

@chrisonline I just published it on the npm registry.

[chrisonline]

@kuhnroyal Great, thank you very much!

[EricPSU]

+1 for an official datetime picker, we'll check out @kuhnroyal in the meantime.

[dannyhchan]

Anyone have it bundled successfully with webpack with @kuhnroyal time picker?

[kuhnroyal]

@dannyhchan I am using this productive with webpack and AOT. Do you have any issues?

[dannyhchan]

@kuhnroyal , I just got it working with webpack. I was missing the @angular/material-moment-adapter which was causing the issue. Great work by the way.

[jkossis]

@kuhnroyal wonderful work man! Is there any support for a 12 hour clock, with AM & PM options? Once again, you are a hero.

[kuhnroyal]

@jkossis no, features are basically the same as in the http://code.promactinfo.com/md2/#/datepicker

[jkossis]

@kuhnroyal Understood. What about touchUi? I seem to get the following error when enabling it:

[kuhnroyal]

@jkossis probably a bug, I am not using touchUi. Create an issue and move the discussion over there, let's not hijack this issue.

[matheo]

@andrewseguin can we have a word here to know if our work will simply be depreciated over the time and have no expectations about an official intention to work together, but simply fork and build our own solutions as we have no options to contribute to the main repo?

[JumpLink]

@torabian we have also an own implementation for angular material, we should work together on it :D

• Usage: https://jumplink.eu/en/blog/post/angular-2-timepicker-for-material-design
• Demo: https://stackblitz.com/edit/material-time-control
• Repo: https://github.com/SteveDunlap13/MaterialTimeControl

[roshan-built-io]

Time Picker (highly requested feature): do you have added to your roadmap?

[filosof86]

Hi guys,

Is there any ETA on this? Really need it...

[kyleabens]

Not sure if this has been shared already but this is the best solution I've found so far https://danielykpan.github.io/date-time-picker/

[bastienlemaitre]

https://github.com/kuhnroyal/mat-datetimepicker Example:

<form [formGroup]="group">
  <mat-form-field>
    <mat-placeholder>Start DateTime</mat-placeholder>
    <mat-datetimepicker-toggle [for]="datetimePicker" matSuffix></mat-datetimepicker-toggle>
    <mat-datetimepicker #datetimePicker type="datetime" openOnFocus="true" timeInterval="5"></mat-datetimepicker>
    <input matInput formControlName="start" [matDatetimepicker]="datetimePicker" required autocomplete="false">
  </mat-form-field>
</form>

[matheo]

I've released @coachcare/datepicker 0.7.0 it uses the touchUi by default (popup only) and it needs some heavy testing even when it works for us very well.

Waiting for feedback https://github.com/selvera/npm-datepicker/issues Enjoy!

[ian-hamilton]

Are there any implementations using something like the ControlValueAccessor so it can be used in a Reactive form?

[matheo]

@ian-hamilton I guess mostly of the solutions linked may support both Template and Reactive Forms

[ian-hamilton]

The first couple that I looked at did not, but https://github.com/kuhnroyal/mat-datetimepicker worked very well for that and it appears to be an extension of the MD implementation. So nice job.

[matheo]

@ian-hamilton what I've done in @coachcare/datepicker was to fork the official material datepicker, and adapted the MD timepicker code with all the required changes to the DateAdapter. Packaged it with ng-packagr and voilá.

[jainankit102]

HI Guys,

Is there any ETA on date time picker. Cant wait more now.

Thanks in Advance.

[julianobrasil]

@jainankit102, I'm afraid you'll have to wait some more time. For now, well... my experience with native <input type="time"> is not bad. Of course, you won't get a standard look (each browser renders it in a different way and old browsers ignore this type if I'm not mistaken)

[pierreherman]

Much needed indeed... +a gazillion on my side I am implementing an app (and I am not a developer) and I would need a no-brainer to add date and time to some forms.

[ameya]

Any eta on this issue?

[japalo]

I am also interested in an ETA