Material input type datetime-local shows its own placeholder and toggle button

Question

I'm trying to render the angular material date picker. Which is not the problem (DEMO)

<mat-form-field class="example-full-width">
    <input
        matInput
       [matDatepickerFilter]="myFilter"
       [matDatepicker]="picker"
       placeholder="Choose a date"
    />
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

But in my case I need a date-time picker. From what I found on the web, you simple add

 type="datetime-local"

to the input field. And I can confirm that this works, but it does weird things with the input field.

DEMO

Although angular material seems to support this type the picker you get however is native.

It has its own toggle button and it shows default text dd/mm/yyyy --:--. Is there a way to hide this text and toggle button?

Answer 1

Angular material does not support time picker currently, but there is an open issue requesting that: https://github.com/angular/components/issues/5648

You can try to use 3rd party extension for date & time picker until it is added to Angular material: https://ng-matero.github.io/extensions/components/datetimepicker/overview

Answer 2

I didn't find time-picker feature in Angular Material.

Try this - https://www.npmjs.com/package/@angular-material-components/datetime-picker

Answer 3

Just skip the toggle line and the [matDatepicker] directive:

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

This is working for me and frankly speaking I don't understand how the input and the datepicker are connected with each other: possibly just because they're inside the same mat-form-field. But it works! The only issue is that you can't disable specific days or times as you don't have a reference to the toggle in the input, so the [matDatepickerFilter]="myFilter" is not working...