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

Question

I have this piece of code in my html:

Answer 1

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.

1. MaterialTimeControl - Material Design with Angular Material, CDK, and Flex Layouts

2. amazing-time-picker - Not built with Angular Material, but built to be compatible with it

3. date-time-picker - Not fully Material Design, but built with the CDK

Answer 2

this is my component.html code

      <mat-form-field>
          <input matInput ngModel name="dateofbirth" [matDatepicker]="dateofbirth" #dateofbirth="ngModel" placeholder="Choose your Birth Date" required dateofbirth>
          <mat-datepicker-toggle matSuffix [for]="dateofbirth"></mat-datepicker-toggle>
          <mat-datepicker  #dateofbirth startView="year" [startAt]="startDate"></mat-datepicker>
        </mat-form-field>

this is my component.ts code

onSignup(form: NgForm)
 {
    if (form.invalid) {
      return;
    }

    this.authService.createUser(
      this.id,
      form.value.dateofbirth);

      console.log(form.value.dateofbirth)
  }

hope it helps for you...as it did for me thank you!!!

Answer 3

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';