Angular material 15 matInput type datetime-local is missing native datetime picker

Question

I'm using in a mat-form-field the input filed (with mat-input) with type "datetime-local" and until Angular 14 there was a button for a native datetime Picker. But since I upgraded to Angular 15 and did the Material MDC migration this button is missing and can't find any option to bring this datetime picker back.

I googled but found nothing. I would like to continue using the datetime picker

This is my code:

https://stackblitz.com/edit/angular-ivy-jzgzsq

<mat-form-field class="half-width" appearance="fill">
  <mat-label>Donwtime Start</mat-label>
  <input
    matInput
    placeholder="dd.MM.yyyy hh:mm"
    formControlName="startDateInput"
    type="datetime-local"
    [value]="startDate | date : 'yyyy-MM-ddTHH:mm'"
    (change)="convertStartDate($event)"
    required
    tabindex="1"
  />
  <mat-error *ngIf="controlGroup.get('startDateInput').invalid">
    Bitte wähle ein Startdatum für die Downtime aus
  </mat-error>
</mat-form-field>

Angular 14

Angular 15 with Material MDC migration

score 2 · Accepted Answer · answered Jan 31 '23 at 13:38

The button is there in the underlying native input element but hidden for some reason, maybe browser compatibility. For our purposes the application only has to work in modern webkit browsers so we can restore the button with the following global style:

.mdc-text-field__input::-webkit-calendar-picker-indicator {
    display: block !important;
}

Amine · Answer 2 · 2023-01-24T16:05:00.253

0

in angular material the toggle icon isn't there by default, you will have to implement it manually.

here's how you can have the toggle icon :

<mat-form-field class="half-width" appearance="fill">
<mat-label>Donwtime Start</mat-label>
<input
matInput
[matDatepicker]="picker"
placeholder="dd.MM.yyyy hh:mm"
formControlName="startDateInput"
type="datetime-local"
[value]="startDate | date : 'yyyy-MM-ddTHH:mm'"
(change)="convertStartDate($event)"
required
tabindex="1"
 />
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker- 
toggle>
<mat-error *ngIf="controlGroup.get('startDateInput').invalid">
Bitte wähle ein Startdatum für die Downtime aus
</mat-error>
</mat-form-field>

I hope that this helps, do not hesitate to ask me in comments if this doesn't work

edited Jan 24 '23 at 16:05

answered Jan 24 '23 at 15:27

Amine

121
6

Sorry this is not working for me, I need an date**time** picker. I updated my question with an code snippet. And arghhh why do I get a vote down and from whom :( – Raphael Ebner Jan 24 '23 at 15:49
don't mind yourself with the vote down I'll make sure it will be fixed ;) – Amine Jan 24 '23 at 15:52
I edited my answer, please test it and tell me if it solves the problem or not – Amine Jan 24 '23 at 16:05
No unfortunately still does not work. I think something like this is missing: ``, then the date picker opens. But I also need the time. Do you know why the old one does not work anymore? It worked fine in the previous versions. – Raphael Ebner Jan 24 '23 at 16:15
can you fork your project in stackblitz and share it with me? – Amine Jan 24 '23 at 16:17
Finally took me years to make a working StackBlitz [see](https://stackblitz.com/edit/angular-ivy-jzgzsq?file=src/app/app.component.html) – Raphael Ebner Jan 25 '23 at 09:49
there is no datepicker in the link that u sent to me – Amine Jan 25 '23 at 11:16
Oh sorry I thougt you wanted to see the new version, now I downgraded to angular v14 and there is the datetime picker back. Same link – Raphael Ebner Jan 25 '23 at 12:31
reproduce the problem that you have in stackblitz link so I can fix it ^^' – Amine Jan 25 '23 at 12:35
The problem is when I upgrade from angular v14 to v15! – Raphael Ebner Jan 25 '23 at 12:49
take a look at this it might help [code](https://stackblitz.com/run?file=src%2Fapp%2Fdatepicker-overview-example.ts) it will take some time to install the dependencies just be patient ^^ – Amine Jan 25 '23 at 13:19
I am sorry, but this directs my to stackblitz homepage not to any project – Raphael Ebner Jan 26 '23 at 08:35
[link](https://stackblitz.com/edit/angular-qt1y2p?file=src%2Fapp%2Fdatepicker-overview-example.ts) im sorry.. what about now? – Amine Jan 26 '23 at 08:40
I'm very happy that you want to help me. But this is still a date picker. I need a date**time** picker, as in my stackblitz shown... – Raphael Ebner Jan 26 '23 at 09:05
I found out that angular material does not support time picker currently, you are using HTML time picker in a mat input. for that I would suggest u use a third party extension [link](https://ng-matero.github.io/extensions/components/datetimepicker/overview) – Amine Jan 26 '23 at 09:27
Okay, but what changed in v15 that this is not working anymore. Do you know that? – Raphael Ebner Jan 26 '23 at 09:43

score 0 · Answer 3 · answered Jan 26 '23 at 14:37

0

Since I could not find a solution I use this one now:
https://www.npmjs.com/package/@angular-material-components/datetime-picker

answered Jan 26 '23 at 14:37

Raphael Ebner

27
5

Angular material 15 matInput type datetime-local is missing native datetime picker

3 Answers3