DatePicker not working inside a Mat Dialog window

Question

I am trying to create a form, which contains two start/end date Date pickers using Angular Material. For some reason, when I add the date picker inside the form in the Dialog window, the layout of the dialog is not rendered propely as it can be seen from the image. What can be the cause of this?

Template:

<div class="consumption-form">
    <form [formGroup]="consumptionControl" id="consumptionForm">
        <p class="consumption-field">
            <mat-form-field hintLabel="Max 10 characters" appearance="fill">
                <mat-label>BGpoint</mat-label>
                <input matInput #BGpoint maxlength="10" placeholder="BG5521900640000000000000001668712" formControlName="BGpointControl">
                <mat-error>
                    <span *ngIf="consumptionControl?.controls.BGpointControl?.errors?.pattern">Field should contain 10 numeric
          characters!</span>
                </mat-error>
                <mat-hint align="end">{{BGpoint.value?.length || 0}}/10</mat-hint>
            </mat-form-field>
        </p>
        <p class="consumption-field">
            <mat-form-field appearance="fill">
                <mat-label>Choose a start date</mat-label>
                <input matInput [matDatepickerFilter]="myFilter" [matDatepicker]="picker">
                <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
                <mat-datepicker #picker></mat-datepicker>
            </mat-form-field>
        </p>

        <button mat-raised-button type="submit" (click)="submit(BGpoint) " mat-icon-button matTooltip="Click to search for results " [matTooltipPosition]="position.value " [matTooltipShowDelay]="500
                " [matTooltipHideDelay]="500">
            <mat-icon aria-label="Search button icon ">search</mat-icon>
        </button>

    </form>
</div>

Component ts:

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { TooltipPosition } from '@angular/material/tooltip';

@Component({
  selector: 'app-consumption-details',
  templateUrl: './consumption-details.component.html',
  styleUrls: ['./consumption-details.component.css']
})
export class ConsumptionDetailsComponent implements OnInit {

  myFilter = (d: Date | null): boolean => {
    const day = (d || new Date()).getDay();
    // Prevent Saturday and Sunday from being selected.
    return day !== 0 && day !== 6;
  }
  
  consumptionControl: FormGroup;
  private positionOptions: TooltipPosition[] = ['after', 'before', 'above', 'below', 'left', 'right'];
  position = new FormControl(this.positionOptions[0]);
  constructor() { }

  ngOnInit(): void {
    this.consumptionControl = new FormGroup({
      BGpointControl: new FormControl('', [Validators.minLength(1), Validators.maxLength(20), Validators.pattern("*")]),
    });
  }
  submit(BGPoint:string){

  }

}

The Dialog window is displayed as a white strip on the left side of the screen that goes from top to bottom.

Does this answer your question? [Angular material: MatDatepicker: No provider found for DateAdapter](https://stackoverflow.com/questions/49720908/angular-material-matdatepicker-no-provider-found-for-dateadapter) — nikoswsn, Sep 16 '20 at 12:53

score 5 · Answer 1 · answered Aug 31 '20 at 13:40

I know I'm a little late to the party, but I just encountered a similar problem as OP did. In my case mat-datepicker worked fine until I tried to put it in a form in mat-dialog window. Even though MatNativeDateModule and MatDatepickerModule were imported in my module, I was still getting ERROR Error: MatDatepicker: No provider found for DateAdapter in a console.

What worked for me was importing the modules above in both MyModule and in AppModule and also registering MatDatepickerModule as a provider in MyModule.

What worked for me was importing MatNativeDateModule in app.module.ts. Off course I also imported MatDatepickerModule. Now I can see the datepicker in the mat-dialog form. — Learner, Oct 20 '22 at 17:45

s.dallapalma · Answer 2 · 2021-10-04T13:30:42.187

1

Following the answer linked by @nikoswsn, importing MatNativeDateModule in the component's module worked for me.

import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatNativeDateModule } from '@angular/material/core';
// ...


@NgModule({
    imports: [
        MatDatepickerModule,
        MatNativeDateModule,
        // ...

edited Oct 04 '21 at 13:30

answered Oct 04 '21 at 13:22

s.dallapalma

1,225
1
12
35

DatePicker not working inside a Mat Dialog window

2 Answers2