feat(datepicker): add support for choosing time

[mmalerba]

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

[opsnull]

Please give an ETA.

[fxck]

Q1 2019

[Splaktar]

The only official update on an ETA, that is currently available, is that this feature is not planned to be delivered in March 2018. You can see the Q1 2018 goals in the README here.

New goals for Q2 2018 should be posted soon and they will cover April-June 2018.

If you have a critical need for a time picker today, please look for an existing implementation and don't wait for this feature to be delivered.

If you are making budgeting and planning decisions about a new project, please don't assume that this feature will be ready for you to use in your production application.

Some existing options

• MaterialTimeControl - Material Design with Angular Material, CDK, and Flex Layouts
• amazing-time-picker - Not built with Angular Material, but built to be compatible with it
• date-time-picker - Not fully Material Design, but built with the CDK

I am sure that these projects would welcome your contributions. I have seen quite a few great contributions have already been made to them.

There are a few others listed above, but they do not have screenshots, Stackblitz, or a demo site available to see the time pickers in action.

[Gaiidenn]

Hello here, for those who likes SteveDunlap13/MaterialTimeControl package (https://github.com/SteveDunlap13/MaterialTimeControl), I just made a pull request with some interesting changes :

Specific module created for an easier import style Added min, max & disabled abilities 24 hours time format now display clock hours on 2 distinct circles (Android like style) The clock now display a button for every minute to be selectable (but only 5, 10, 15, ... shows the number) If the pull request takes too long for you to be accepted, feel free to fork it from https://github.com/Gaiidenn/MaterialTimeControl

[Agranom]

Hello. I've implemented time picker by material desing https://github.com/Agranom/ngx-material-timepicker and I can implment it for you as well. Let me know please

[casni14]

Hi there, For those who likes owsolutions/amazing-time-picker, but would like a 24 hour format I have a fork from owsolutions/amazing-time-picker which I have modified to display the 24 hour format:

You can clone, download or fork from here: https://github.com/casni14/amazing-time-picker

[ghost]

@Gaiidenn This picker looks great but I don't really understand how I am supposed to use it. npm install SteveDunlap13/MaterialTimeControl alone does not seem to be enough - at least then I still can't import the MaterialTimeControlModule.

[naveedahmed1]

@Splaktar is there any update on this?

[Splaktar]

@naveedahmed1 nope, it's not a Q2 priority (the link above lists them). I'm not sure that it will be a priority for Q3 either, but I can mention it to the team since this is the top vote getter of 👍 in the OP.

[Splaktar]

@naveedahmed1 OK, I do have an update now! Work has begun on some foundational pieces that are required before we can implement this component. There is still no ETA on when this will be available for production use, but it likely won't be within the next couple of months.

[odahcam]

@Splaktar I don't wanna be rude, I'm just curious, why these things take that long to get ready and deployed? 🤔

[Splaktar]

@odahcam building a time picker that can be integrated with other components, supports i18n and various locales, is fully accessible, is performant, is themeable, is as lightweight as possible in bundle size, best takes advantage of the features of Angular, works across browsers, follows Material Design guidelines, etc is extremely complicated and takes significant resources. This isn't just an <input type="time"> element. There are no clear set of steps to follow for how to build a component that meets these requirements today. It isn't something that 1 person can throw together in a single sprint.

If you have tried the numerous time picker implementations linked in this issue, you should see how many issues can arise and edge cases that need to be handled. That's after these great open source contributors have put in tens or hundreds of hours into building those components.

Additionally, there are higher priorities than a time picker and the Angular Material team has limited resources. You can see the current priorities in the roadmap here. These include important and difficult topics like drag and drop, virtual scrolling, improvements to data tables, and accessibility across a number of components.

Other components were previously a higher priority as well, these included the recent releases of major components like the data table, tree, and expansion panel.

Hopefully this addresses some of your concerns. I know that the team is really excited to have a solid Material Design time picker ready for commercial entities to use in production for free. 😃 Thank you for following this issue and staying engaged!

[odahcam]

Thanks @Splaktar, this means a lot. I wish either you had a bigger team or it was easier for community to help.

[matheo]

I've synced our date-time picker to Angular 6 and the latest Material module and it's ready for testing: https://www.npmjs.com/package/@coachcare/datepicker

when I have time I might publish a demo app, but for anyone who already used the official Module, trying this one is as easy as importing the same modules but from this package:

import {
  MatDatepickerModule,
  MatMomentDateModule
} from '@coachcare/datepicker';

and theme it from your style.scss like:

@import '~@coachcare/datepicker/theming';

@include mat-datepicker($theme);

[naveedahmed1]

@matheo seems great, but I am unable to import the theme, Its throwing error on the line @include mat-datepicker($theme);

[matheo]

@naveedahmed1 be sure to import the module theming, I added a dummy example path, the correct one can be: @import '~@coachcare/datepicker/theming';

[MichalK6677]

@matheo how can I change date format in your datetimepicker? Do you have an example? I created own DATE_FORMATS for testing:

import { MatDateFormats } from "@coachcare/datepicker";

export const CW_DATE_FORMATS: MatDateFormats = {
    parse: {        
        date: ['LLL'],
        datetime: ['LLL'],
        time: ['LLL'],
    },
    display: {
        date: 'LLL',
        datetime: 'LLL',
        time: 'LLL',
        dateA11yLabel: 'LLL',
        monthDayLabel: 'LLL',
        monthDayA11yLabel: 'LLL',
        monthYearLabel: 'LLL',
        monthYearA11yLabel: 'LLL',
        timeLabel: 'LLL',
    }
};

and added these lines to module providers:

{ provide: MAT_DATE_FORMATS, useValue: CW_DATE_FORMATS }
{ provide: MAT_MOMENT_DATE_FORMATS, useValue: CW_DATE_FORMATS }

Format is not changed. This approach works for standard material datepicker.

[matheo]

@MichalK6677 please check the following issue :) https://github.com/selvera/npm-datepicker/issues/4

[dainbrump]

Let me start by saying that what has been accomplished by the Angular Material devs is nothing short of amazing. That being said, I know that the community has been badgering for a timepicker since the very first edition of Angular Material - back in the md- prefix days and Angular 1.x. I do appreciate @Splaktar's comment and completely understand the complexities of building with all the i18n and other concerns / requirements. However, it [timepicker] has been such a hot topic and pain point for so long that I'm having a really hard time understanding why this wasn't one of the first key components developed in this package.

Anyway, I'll poke at one of the recommended modules / hacks to get a time picker working in my apps. Thanks again for all the hard work done so far and thanks to everyone who provided suggestions and modules in this thread.

[rajesnal]

Are there any plans to implement the timepicker in official package.

[Splaktar]

@rajesnal yes, it is planned with a P3 priority as you can see from the label on this issue. Before any P3 issues get much attention, we need to solve this one P1 issue, these 41 P2 issues, and then any P3 issues that may be a higher priority (sorry we don't have a way to show the priorities within P3). Please also note that we currently have 217 untriaged issues.

You can also see the Q4 Roadmap which mentions improvements to the Table and some internal tooling and efficiency work (some related to testing Ivy). Something like improving the a11y of mat-select may also be part of this (a P2 issue). Part of this efficiency and tooling work is to allow us to review/test/merge PRs faster so that we can get more features in faster.

We don't generally give ETAs for components that aren't available at least in the cdk-experimental package yet. I would advise that you don't estimate or start a project expecting that Angular Material will provide you a fully functional time picker before the project's completion date.

I am not currently aware of any direct actions that the community can take which will decrease the time until a timepicker is available in Angular Material. If I learn of any, I will certainly let this thread know.

There are some indirect actions that the community could take though. These include sending PRs for the following issues:

• 1 P2 issue with the help wanted label
• 12 P3 issues with the help wanted label

[torabian]

Hi there, For those who likes owsolutions/amazing-time-picker, but would like a 24 hour format I have a fork from owsolutions/amazing-time-picker which I have modified to display the 24 hour format:

You can clone, download or fork from here: https://github.com/casni14/amazing-time-picker

Hello. I am owner of this repository, let's work out and see how we can implement your version into the original version.

[torabian]

Can I prepare amazing-time-picker to be a part of Angular material?

[IlCallo]

@torabian This is also a very good option, maybe you should get in contact with its maintainer too and check if you can integrate the best of both your packages into an Angular Material PR

[Agranom]

I already suggested my timepicker, but it seems like Angular Material team want to implement their own ;)

[odahcam]

They probably prefer a PR. 🤔

[beeman]

@Agranom I agree with @odahcam, I think a PR would be very welcome. I'm happy to help with anything to get this in!

[IlCallo]

Not sure they are so open for PRs with a whole new feature actually... I saw there is a project which aims at providing components fully compatible with angular material but maintained by the community, while we wait for the team to actually take on some of these issues, maybe we can all gather around it with this kind of things? Can't recall the name, unluckily.

Anyway, I probably wouldn't dare to issue a PR, if I were you, until a maintainer tells they will at least consider to accept it

[odahcam]

You got a point @IlCallo , could you please reference this project you're talking about?

[IlCallo]

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

[marven89]

is there an offcial timepicker implemented ?

[IlCallo]

is there an offcial timepicker implemented ?

No. But please take the time to read all the thread before posting...

[batousik]

Is there an unofficial time/datetime picker implemented that works with forms/reactive forms?

[bastienlemaitre]

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

[Frozen-byte]

https://github.com/liuy97/md2

[tiaguinho]

I have a timer picker inside the Material Community Components. Thanks to @Splaktar, on the last version I was able to add support to the Material Theme. With this new feature, the timer picker will apply the same colors as the rest of the application.

[odahcam]

Thanks for the component, I would like to give some feedback: I miss the feature of click and hold on the numbers and then move the mouse to precisely choose a minute or even clicking somewhere and selecting the closest hour.

[francessco410]

Is there any progress about this issue?

[universonic]

How about this one?

[ameya]

We will need the second increment also

On Fri, 15 Mar 2019, 9:03 am Alfred Chou <notifications@github.com wrote:

How about this one?

[image: スクリーンショット 2019-03-15 12 30 32] https://user-images.githubusercontent.com/16303136/54406666-4abcf800-471e-11e9-94d7-447ba98ee836.png

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/angular/material2/issues/5648#issuecomment-473146343, or mute the thread https://github.com/notifications/unsubscribe-auth/AAF5LYy0_Z56LFHjDjdpLmJAyiGGKwZcks5vWxR6gaJpZM4OTKuW .

[Splaktar]

No update here other than letting you know that we understand that this is a hugely requested feature. As noted in our Roadmap, much of the team is focused on helping ship the best version of the Ivy rendering engine possible.

That said, we showed a brief preview of working with Material Components for the Web at ng-conf 2019. Unfortunately, they don't have a time picker component yet either, but they also have a feature request for one.

[jelbourn]

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

[matheo]

@jelbourn I have some counter arguments according my experience with @coachcare/datepicker npm:

• There was a spec but they unpublished it (previously at https://material.io/guidelines/components/pickers.html)
• My previous boss thought that the Android UX is quite good on desktop, using it as modal tho.
• For date formatting I've added a new type input with the corresponding internal processing, not a big deal IMO.

[Splaktar]

@matheo you can find the 2014-2017 Material Pickers spec here.

Thank you for sharing your work there! It would be ideal if your datepicker wasn't using the Mat prefix:

import { MatDatepickerModule, MatMomentDateModule } from '@coachcare/datepicker';

Something like the following would be recommended for third party modules

import { CcDatepickerModule, CcMomentDateModule } from '@coachcare/datepicker';

[matheo]

@Splaktar indeed, at that moment I was wishing it to become the official hehe and on the other hand, to just update the import paths and jump from one to the another :)

[ipzKellyR]

Really would like to see this feature.

[am-awais]

Please do something Angular material We were desperately waiting for your response and also Resolve all open issue ASAP It really annoying when we find you'r(Angular Material ) open issue's for so long :( :( :(

[odahcam]

They're doing it for free, so don't expect them to attend to any request.

[StefanJanssen95]

They're doing it for free, so don't expect them to attend to any request.

They are employed by Google so I don't think they are doing it for free.

[am-awais]

They're doing it for free, so don't expect them to attend to any request.

Really!!!! this issue is created on Jul 10, 2017, besides request's ,what other options do we have?