Angular 6 material - how to get date and time from matDatepicker?

Question

I have this piece of code in my html:

<mat-form-field>
    <input matInput [matDatepicker]="myDatepicker" placeholder="Choose a date" [(ngModel)]="model.value" name="value">
    <mat-datepicker-toggle matSuffix [for]="myDatepicker"></mat-datepicker-toggle>
    <mat-datepicker #myDatepicker></mat-datepicker>
</mat-form-field>

With this i'm able to get date with this format: YYY-MM-DDThh:mm:ss:millisZ.
Using matDatepicker i'm able to select the date but i need after the date selection to select the time too.
Is possible to achieve this result using matDatepicker ONLY?
Thanks

Well if you are willing to use third-party datetime pickers you can try this answer https://stackoverflow.com/a/71742883/5374995 or https://www.npmjs.com/package/@handylib/ngx-datepicker — Vikas Kandari, Apr 04 '22 at 19:40

score 13 · Accepted Answer · answered Jul 12 '18 at 15:14

13

No, as of now, it is not possible to choose time from matDatePicker. There is still an open issue on github regarding this feature.

Summary of the issue thread :

Alternatively you can use one of the following to have dateTimePicker for your project.

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

answered Jul 12 '18 at 15:14

Amit Chigadani

28,482
13
80
98

It seems that i can't insert non-matInput elements in a mat-form-field! It's that possible? O.o" – Roberto Manfreda Jul 12 '18 at 16:33
Which element are you referring to? – Amit Chigadani Jul 12 '18 at 17:19
Do you know if any of this is compatible with angular6, rxjs6 ? – Josf Jul 20 '18 at 03:50

Anand Rockzz · Answer 2 · 2019-12-20T17:46:58.360

1

If you want a simple solution, then type="time" works. polyfill required for Safari and IE,

Example:

<mat-form-field>
  <input matInput type="time" class="bg-none" formControlName="_time" placeholder="Time">
</mat-form-field>

You will have to do the following to polyfill an Angular app

npm i time-input-polyfill

add the following line to polyfill.ts under APPLICATION IMPORTS

import 'time-input-polyfill';

edited Dec 20 '19 at 17:46

answered Dec 20 '19 at 17:41

Anand Rockzz

6,072
5
64
71

1

Question was specifically regarding the use of matDatepicker.. – K. Akins Jan 08 '20 at 18:23
Today it's [not possible](https://stackoverflow.com/a/51309204/234110) So I provided an alternative without matDatepicker for others who land here. Apologies, for offending you. – Anand Rockzz Jan 08 '20 at 20:12
Not offended at all! It's just the functionality in matDatepicker is pretty specific, and the proposed solution here doesn't really come close to meeting the same needs. – K. Akins Feb 04 '20 at 03:12

score 0 · Answer 3 · answered Mar 18 '22 at 21:02

Even though it's not perfect, nevertheless the mat date picker lets you select date AND time after that, no need for extra libraries, if you accept some compromise.

Here it is.

<mat-form-field>
    <input matInput
    required
    formControlName = "h_Ini"
    type="datetime-local"
    placeholder="Data Lezione"
    >
    <mat-datepicker></mat-datepicker>
</mat-form-field>

When you include type="datetime-local" this makes it for dates AND times. The little problem I haven't solved yet is that since this comes with an in-built toggle (that's why there is not additional toggle specified) you can't include for the picker a values-filter.

Angular 6 material - how to get date and time from matDatepicker?

3 Answers3

Linked