Search code examples
angularangular-materialangular-material-datetimepicker

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

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.

enter image description here

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?

Solution

  • 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