@angular/material/core#MAT_DATE_LOCALE TypeScript Examples

@NgModule({
  declarations: [DxcDateInputComponent],
  imports: [
    CommonModule,
    DxcTextInputModule,
    FormsModule,
    DxcBoxModule,
    MdePopoverModule,
    MatDayjsDateModule,
    MatDatepickerModule,
  ],
  exports: [DxcDateInputComponent],
  providers: [
    { provide: MAT_DATE_FORMATS, useValue: DAYJS_DATE_FORMATS },
    {
      provide: DateAdapter,
      useClass: DayjsDateAdapter,
      deps: [MAT_DATE_LOCALE, Platform],
    },
  ],
})
export class DxcDateInputModule {}

@Component({
  selector: 'app-moment-js-datepicker',
  templateUrl: './moment-js-datepicker.component.html',
  styleUrls: ['./moment-js-datepicker.component.scss'],
  providers: [
    // `MomentDateAdapter` and `MAT_MOMENT_DATE_FORMATS` can be automatically provided by importing
    // `MatMomentDateModule` in your applications root module. We provide it at the component level
    // here, due to limitations of our example generation script.
    {provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE]},
    {provide: MAT_DATE_FORMATS, useValue: MAT_MOMENT_DATE_FORMATS},
  ],
})
export class MomentJsDatepickerComponent implements OnInit {

    // Datepicker takes `Moment` objects instead of `Date` objects.
    date = new FormControl(moment([2017, 0, 1]));

  constructor() { }

  ngOnInit() {
  }

}

@Component({
  selector: 'app-different-locale-datepicker',
  templateUrl: './different-locale-datepicker.component.html',
  styleUrls: ['./different-locale-datepicker.component.scss'],
  providers: [
    // The locale would typically be provided on the root module of your application. We do it at
    // the component level here, due to limitations of our example generation script.
    {provide: MAT_DATE_LOCALE, useValue: 'ja-JP'},

    // `MomentDateAdapter` and `MAT_MOMENT_DATE_FORMATS` can be automatically provided by importing
    // `MatMomentDateModule` in your applications root module. We provide it at the component level
    // here, due to limitations of our example generation script.
    {provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE]},
    {provide: MAT_DATE_FORMATS, useValue: MAT_MOMENT_DATE_FORMATS},
  ],
})
export class DifferentLocaleDatepickerComponent {

  constructor(private adapter: DateAdapter<any>) {}

  french() {
    this.adapter.setLocale('fr');
  }
}

@Component({
  selector: 'app-custom-datepicker',
  templateUrl: './custom-datepicker.component.html',
  styleUrls: ['./custom-datepicker.component.scss'],
  providers: [
    // `MomentDateAdapter` can be automatically provided by importing `MomentDateModule` in your
    // application's root module. We provide it at the component level here, due to limitations of
    // our example generation script.
    {provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE]},

    {provide: MAT_DATE_FORMATS, useValue: MY_FORMATS},
  ],
})
export class CustomDatepickerComponent implements OnInit {

  date = new FormControl(moment());
  
  constructor() { }

  ngOnInit() {
  }

}

constructor(
    @Optional() @Inject(MAT_DATE_LOCALE) dateLocale: string | null,
    @Optional() @Inject(NGX_MAT_DATEFNS_LOCALES) private locales: Locale[] | null,
    @Optional()
    @Inject(NGX_MAT_DATEFNS_DATE_ADAPTER_OPTIONS)
    private options?: NgxDateFnsDateAdapterOptions
  ) {
    super();

    if (!this.locales || this.locales.length === 0) {
      this.locales = [enUS];
    }

    try {
      this.setLocale(dateLocale || enUS);
    } catch (err) {
      this.setLocale(enUS);
    }
  }

describe('NgxDateFnsDateAdapter with MAT_DATE_LOCALE override', () => {
  let adapter: NgxDateFnsDateAdapter;

  beforeEach(
    waitForAsync(() => {
      TestBed.configureTestingModule({
        imports: [NgxMatDateFnsDateModule],
        providers: [{ provide: MAT_DATE_LOCALE, useValue: '' }],
      }).compileComponents();
    })
  );

  beforeEach(inject([DateAdapter], (d: NgxDateFnsDateAdapter) => {
    adapter = d;
  }));

  it('should load en-US locale when MAT_DATE_LOCALE is null|empty string|undefined etc ', () => {
    expect(adapter.getMonthNames('long')).toEqual([
      'January',
      'February',
      'March',
      'April',
      'May',
      'June',
      'July',
      'August',
      'September',
      'October',
      'November',
      'December',
    ]);
  });
});

describe('NgxDateFnsDateAdapter with MAT_DATE_LOCALE override', () => {
  let adapter: NgxDateFnsDateAdapter;

  beforeEach(
    waitForAsync(() => {
      TestBed.configureTestingModule({
        imports: [NgxMatDateFnsDateModule],
        providers: [{ provide: MAT_DATE_LOCALE, useValue: 'invalid' }],
      }).compileComponents();
    })
  );

  beforeEach(inject([DateAdapter], (d: NgxDateFnsDateAdapter) => {
    adapter = d;
  }));

  it('should set en-US locale when overriding the MAT_DATE_LOCALE injection token with invalid locale value', () => {
    expect(adapter.format(new Date(2017, JAN, 1), 'MMMM d, yyyy')).toEqual(
      'January 1, 2017'
    );
  });
});

describe('NgxDateFnsDateAdapter with MAT_DATE_LOCALE override', () => {
  let adapter: NgxDateFnsDateAdapter;

  beforeEach(
    waitForAsync(() => {
      TestBed.configureTestingModule({
        imports: [NgxMatDateFnsDateModule],
        providers: [
          { provide: MAT_DATE_LOCALE, useValue: 'da' },
          { provide: NGX_MAT_DATEFNS_LOCALES, useValue: [da] },
        ],
      }).compileComponents();
    })
  );

  beforeEach(inject([DateAdapter], (d: NgxDateFnsDateAdapter) => {
    adapter = d;
  }));

  it('should take the default locale id from the MAT_DATE_LOCALE injection token', () => {
    const expectedValue = [
      'søndag',
      'mandag',
      'tirsdag',
      'onsdag',
      'torsdag',
      'fredag',
      'lørdag',
    ];

    expect(adapter.getDayOfWeekNames('long')).toEqual(expectedValue);
  });
});

@NgModule({
  providers: [
    {
      provide: DateAdapter,
      useClass: NgxDateFnsDateAdapter,
      deps: [MAT_DATE_LOCALE, NGX_MAT_DATEFNS_LOCALES, NGX_MAT_DATEFNS_DATE_ADAPTER_OPTIONS],
    },
  ],
})
export class NgxDateFnsDateModule {}

@NgModule({
  providers: [
    {
      provide: NgxMatDateAdapter,
      useClass: NgxMatMomentAdapter,
      deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS]
    }
  ],
})
export class NgxMomentDateModule { }

@NgModule({
  providers: [
    {
      provide: NgxMatDateAdapter,
      useClass: NgxMatMomentAdapter,
      deps: [MAT_DATE_LOCALE, NGX_MAT_MOMENT_DATE_ADAPTER_OPTIONS]
    }
  ],
})
export class NgxMomentDateModule { }

constructor(
    @Optional() @Inject(MAT_DATE_LOCALE) dateLocale: string,
    @Optional()
    @Inject(DAYJS_DATE_ADAPTER_OPTIONS)
    private options?: DayjsDateAdapterOptions
  ) {
    super();
    dayjs.extend(localizedFormat);
    dayjs.extend(customParseFormat);
    dayjs.extend(localeData);
    dayjs.extend(relativeTime);

    this.setLocale(dateLocale);
  }

constructor(@Optional() @Inject(MAT_DATE_LOCALE) dateLocale: string,
    @Optional() @Inject(MAT_MOMENT_DATE_ADAPTER_OPTIONS)
    private _options?: NgxMatMomentDateAdapterOptions) {

    super();
    this.setLocale(dateLocale || moment.locale());
  }

constructor(@Optional() @Inject(MAT_DATE_LOCALE) dateLocale: string,
    @Optional() @Inject(NGX_MAT_MOMENT_DATE_ADAPTER_OPTIONS)
    private _options?: NgxMatMomentDateAdapterOptions) {

    super();
    this.setLocale(dateLocale || moment.locale());
  }

constructor(@Optional() @Inject(MAT_DATE_LOCALE) matDateLocale: string, platform: Platform) {
    super();
    super.setLocale(matDateLocale);

    // IE does its own time zone correction, so we disable this on IE.
    this.useUtcForDisplay = !platform.TRIDENT;
    this._clampDate = platform.TRIDENT || platform.EDGE;
  }

@Component({
  selector: 'gn-ui-wizard-field',
  templateUrl: './wizard-field.component.html',
  styleUrls: ['./wizard-field.component.css'],
  providers: [
    { provide: MAT_DATE_LOCALE, useValue: getLangFromBrowser() },
    {
      provide: DateAdapter,
      useClass: MomentDateAdapter,
      deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS],
    },
    { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS },
  ],
})
export class WizardFieldComponent implements AfterViewInit, OnDestroy {
  @Input() wizardFieldConfig: WizardFieldModel

  @ViewChild('searchText') searchText: TextInputComponent
  @ViewChild('chips') chips: ChipsInputComponent
  @ViewChild('textArea') textArea: TextAreaComponent
  @ViewChild('dropdown') dropdown: DropdownSelectorComponent

  subs = new Subscription()

  get wizardFieldType(): typeof WizardFieldType {
    return WizardFieldType
  }

  get dropdownChoices(): any {
    return this.wizardFieldConfig.options
  }

  get wizardFieldData() {
    const data = this.wizardService.getWizardFieldData(
      this.wizardFieldConfig.id
    )
    switch (this.wizardFieldConfig.type) {
      case WizardFieldType.TEXT: {
        return data || ''
      }
      case WizardFieldType.CHIPS: {
        return data ? JSON.parse(data) : []
      }
      case WizardFieldType.TEXT_AREA: {
        return data || ''
      }
      case WizardFieldType.DATA_PICKER: {
        return data ? new Date(Number(data)) : new Date()
      }
      case WizardFieldType.DROPDOWN: {
        return data ? JSON.parse(data) : this.dropdownChoices[1]
      }
    }
  }

  constructor(private wizardService: WizardService) {}

  ngAfterViewInit() {
    this.initializeListeners()
  }

  ngOnDestroy() {
    this.subs.unsubscribe()
  }

  private initializeListeners() {
    switch (this.wizardFieldConfig.type) {
      case WizardFieldType.TEXT: {
        this.initializeTextInputListener()
        break
      }
      case WizardFieldType.CHIPS: {
        this.initializeChipsListener()
        break
      }
      case WizardFieldType.TEXT_AREA: {
        this.initializeTextAreaListener()
        return
      }
      case WizardFieldType.DATA_PICKER: {
        this.initializeDateInput()
        return
      }
      case WizardFieldType.DROPDOWN: {
        this.initializeDropdownListener()
        return
      }
    }
  }

  private initializeTextInputListener() {
    this.subs.add(
      this.searchText.valueChange.subscribe((value) => {
        this.wizardService.onWizardWizardFieldDataChanged(
          this.wizardFieldConfig.id,
          value
        )
      })
    )
  }

  private initializeChipsListener() {
    this.subs.add(
      this.chips.itemsChange.subscribe((items) => {
        this.wizardService.onWizardWizardFieldDataChanged(
          this.wizardFieldConfig.id,
          JSON.stringify(items)
        )
      })
    )
  }

  private initializeTextAreaListener() {
    this.subs.add(
      this.textArea.valueChange.subscribe((value) => {
        this.wizardService.onWizardWizardFieldDataChanged(
          this.wizardFieldConfig.id,
          value
        )
      })
    )
  }

  initializeDateInput() {
    const time = this.wizardService.getWizardFieldData(
      this.wizardFieldConfig.id
    )
    if (!time) {
      this.wizardService.onWizardWizardFieldDataChanged(
        this.wizardFieldConfig.id,
        new Date().valueOf()
      )
    }
  }

  onDateChange(event: MatDatepickerInputEvent<Date>) {
    this.wizardService.onWizardWizardFieldDataChanged(
      this.wizardFieldConfig.id,
      event.value.valueOf()
    )
  }

  private initializeDropdownListener() {
    this.subs.add(
      this.dropdown.selectValue.subscribe((value) => {
        this.wizardService.onWizardWizardFieldDataChanged(
          this.wizardFieldConfig.id,
          value
        )
      })
    )
  }
}

describe("DxcDate", () => {
  const newMockDate = new Date("1995/12/03");
  const newValue = "03-12-1995";

  test("should render dxc-date", async () => {
    const { getByText } = await render(DxcDateInputComponent, {
      componentProperties: { label: "test-date" },
      imports: [
        MatDayjsDateModule,
        MatNativeDateModule,
        MatInputModule,
        MatDatepickerModule,
        MdePopoverModule,
        DxcBoxModule,
        CommonModule,
        DxcTextInputModule,
      ],
      providers: [
        { provide: MAT_DATE_FORMATS, useValue: DAYJS_DATE_FORMATS },
        {
          provide: DateAdapter,
          useClass: DayjsDateAdapter,
          deps: [MAT_DATE_LOCALE, Platform],
        },
      ],
    });

    expect(getByText("test-date"));
  });

  test("The input´s value is the same as the one received as a parameter", async () => {
    const onChange = jest.fn();
    const onBlur = jest.fn();

    await render(DxcDateInputComponent, {
      componentProperties: {
        label: "test-input",
        value: "03-12-1995",
        onChange: {
          emit: onChange,
        } as any,
        onBlur: {
          emit: onBlur,
        } as any,
      },
      imports: [
        MatDayjsDateModule,
        MatNativeDateModule,
        MatInputModule,
        MatDatepickerModule,
        MdePopoverModule,
        DxcBoxModule,
        CommonModule,
        DxcTextInputModule,
      ],
      providers: [
        { provide: MAT_DATE_FORMATS, useValue: DAYJS_DATE_FORMATS },
        {
          provide: DateAdapter,
          useClass: DayjsDateAdapter,
          deps: [MAT_DATE_LOCALE, Platform],
        },
      ],
    });

    const input = <HTMLInputElement>screen.getByRole("textbox");
    const calendarIcon = screen.getByRole("calendarIcon");

    input.focus();
    expect(screen.getByDisplayValue("03-12-1995"));
    fireEvent.click(calendarIcon);
    expect(screen.getByText("DECEMBER 1995"));
    expect(
      screen.getByText("3").classList.contains("mat-calendar-body-selected")
    ).toBeTruthy();
  });

  test("dxc-date value change and default format", async () => {
    const onChange = jest.fn();

    await render(DxcDateInputComponent, {
      componentProperties: {
        label: "test-input",
        onChange: {
          emit: onChange,
        } as any,
      },
      imports: [
        MatDayjsDateModule,
        MatNativeDateModule,
        MatInputModule,
        MatDatepickerModule,
        MdePopoverModule,
        DxcBoxModule,
        CommonModule,
        DxcTextInputModule,
      ],
      providers: [
        { provide: MAT_DATE_FORMATS, useValue: DAYJS_DATE_FORMATS },
        {
          provide: DateAdapter,
          useClass: DayjsDateAdapter,
          deps: [MAT_DATE_LOCALE, Platform],
        },
      ],
    });

    const input = <HTMLInputElement>screen.getByRole("textbox");
    input.focus();
    fireEvent.input(input, { target: { value: newValue } });
    expect(onChange).toHaveBeenCalledWith({
      value: newValue,
      error: undefined,
      date: newMockDate,
    });
    expect(screen.getByDisplayValue(newValue));
  });

  test("dxc-date change value twice as uncontrolled", async () => {
    const onChange = jest.fn();

    await render(DxcDateInputComponent, {
      componentProperties: {
        label: "test-input",
        defaultValue: "22-10-1998",
        onChange: {
          emit: onChange,
        } as any,
      },
      imports: [
        MatDayjsDateModule,
        MatNativeDateModule,
        MatInputModule,
        MatDatepickerModule,
        MdePopoverModule,
        DxcBoxModule,
        CommonModule,
        DxcTextInputModule,
      ],
      providers: [
        { provide: MAT_DATE_FORMATS, useValue: DAYJS_DATE_FORMATS },
        {
          provide: DateAdapter,
          useClass: DayjsDateAdapter,
          deps: [MAT_DATE_LOCALE, Platform],
        },
      ],
    });
    expect(screen.getByDisplayValue("22-10-1998"));
    const input = <HTMLInputElement>screen.getByRole("textbox");
    input.focus();
    fireEvent.input(input, { target: { value: newValue } });
    expect(onChange).toHaveBeenCalledWith({
      value: newValue,
      error: undefined,
      date: newMockDate,
    });
    expect(screen.getByDisplayValue(newValue));

    input.focus();
    fireEvent.input(input, { target: { value: "04-10-1996" } });
    expect(onChange).toHaveBeenCalledWith({
      value: "04-10-1996",
      error: undefined,
      date: new Date("1996/10/04"),
    });
    expect(screen.getByDisplayValue("04-10-1996"));
  });

  test("Calendar´s value is the same as the input´s date if it´s right (Depending on the format)", async () => {
    const onChange = jest.fn();
    const onBlur = jest.fn();

    await render(DxcDateInputComponent, {
      componentProperties: {
        label: "test-input",
        format: "YYYY/MM/DD",
        onChange: {
          emit: onChange,
        } as any,
        onBlur: {
          emit: onBlur,
        } as any,
      },
      imports: [
        MatDayjsDateModule,
        MatNativeDateModule,
        MatInputModule,
        MatDatepickerModule,
        MdePopoverModule,
        DxcBoxModule,
        CommonModule,
        DxcTextInputModule,
      ],
      providers: [
        { provide: MAT_DATE_FORMATS, useValue: DAYJS_DATE_FORMATS },
        {
          provide: DateAdapter,
          useClass: DayjsDateAdapter,
          deps: [MAT_DATE_LOCALE, Platform],
        },
      ],
    });

    const input = <HTMLInputElement>screen.getByRole("textbox");
    const calendarIcon = screen.getByRole("calendarIcon");

    input.focus();
    fireEvent.input(input, { target: { value: "1995/12/03" } });
    expect(onChange).toHaveBeenCalledWith({
      value: "1995/12/03",
      error: undefined,
      date: newMockDate,
    });
    input.focus();
    expect(screen.getByDisplayValue("1995/12/03"));
    fireEvent.click(calendarIcon);
    waitFor(() => {
      expect(screen.getByText("DECEMBER 1995"));
    });
    waitFor(() => {
      expect(
        screen.getByText("3").classList.contains("mat-calendar-body-selected")
      ).toBeTruthy();
    });
  });

  test("dxc-date invalid value", async () => {
    const onChange = jest.fn();
    const invalidValue = "03-12-199_";

    await render(DxcDateInputComponent, {
      componentProperties: {
        label: "test-input",
        onChange: {
          emit: onChange,
        } as any,
      },
      imports: [
        MatDayjsDateModule,
        MatNativeDateModule,
        MatInputModule,
        MatDatepickerModule,
        MdePopoverModule,
        DxcBoxModule,
        CommonModule,
        DxcTextInputModule,
      ],
      providers: [
        { provide: MAT_DATE_FORMATS, useValue: DAYJS_DATE_FORMATS },
        {
          provide: DateAdapter,
          useClass: DayjsDateAdapter,
          deps: [MAT_DATE_LOCALE, Platform],
        },
      ],
    });
    const input = <HTMLInputElement>screen.getByRole("textbox");

    input.focus();
    fireEvent.input(input, { target: { value: invalidValue } });

    expect(onChange).toHaveBeenCalledWith({
      value: invalidValue,
      error: undefined,
      date: undefined,
    });
  });

  test("onChange function is called when the user selects from the calendar", async () => {
    const onChange = jest.fn();

    await render(DxcDateInputComponent, {
      componentProperties: {
        label: "test-input",
        value: newValue,
        onChange: {
          emit: onChange,
        } as any,
      },
      imports: [
        MatDayjsDateModule,
        MatNativeDateModule,
        MatInputModule,
        MatDatepickerModule,
        MdePopoverModule,
        DxcBoxModule,
        CommonModule,
        DxcTextInputModule,
      ],
      providers: [
        { provide: MAT_DATE_FORMATS, useValue: DAYJS_DATE_FORMATS },
        {
          provide: DateAdapter,
          useClass: DayjsDateAdapter,
          deps: [MAT_DATE_LOCALE, Platform],
        },
      ],
    });
    const calendarIcon = screen.getByRole("calendarIcon");

    fireEvent.click(calendarIcon);
    fireEvent.click(screen.getByText("4"));
    waitFor(() => {
      expect(onChange).toHaveBeenCalledWith({
        value: "04-12-1995",
        date: new Date("04/12/1995"),
      });
    });
  });

  test("onChange function is called when the user selects from the calendar, the stringValue received by the function is the date with the correct format", async () => {
    const onChange = jest.fn();

    await render(DxcDateInputComponent, {
      componentProperties: {
        label: "test-input",
        value: "12-03-1995",
        format: "MM-DD-YYYY",
        onChange: {
          emit: onChange,
        } as any,
      },
      imports: [
        MatDayjsDateModule,
        MatNativeDateModule,
        MatInputModule,
        MatDatepickerModule,
        MdePopoverModule,
        DxcBoxModule,
        CommonModule,
        DxcTextInputModule,
      ],
      providers: [
        { provide: MAT_DATE_FORMATS, useValue: DAYJS_DATE_FORMATS },
        {
          provide: DateAdapter,
          useClass: DayjsDateAdapter,
          deps: [MAT_DATE_LOCALE, Platform],
        },
      ],
    });
    const calendarIcon = screen.getByRole("calendarIcon");

    fireEvent.click(calendarIcon);
    expect(screen.getByText("DECEMBER 1995"));
    expect(
      screen.getByText("3").classList.contains("mat-calendar-body-selected")
    ).toBeTruthy();
    fireEvent.click(screen.getByText("4"));
    waitFor(() => {
      expect(onChange).toHaveBeenCalledWith({
        value: "12-04-1995",
        date: new Date("04/12/1995"),
      });
    });
  });

  test("If the user types something, if controlled and without onChange, the value doesn´t change", async () => {
    const onChange = jest.fn();

    await render(DxcDateInputComponent, {
      componentProperties: {
        label: "test-input",
        value: newValue,
        onChange: {
          emit: onChange,
        } as any,
      },
      imports: [
        MatDayjsDateModule,
        MatNativeDateModule,
        MatInputModule,
        MatDatepickerModule,
        MdePopoverModule,
        DxcBoxModule,
        CommonModule,
        DxcTextInputModule,
      ],
      providers: [
        { provide: MAT_DATE_FORMATS, useValue: DAYJS_DATE_FORMATS },
        {
          provide: DateAdapter,
          useClass: DayjsDateAdapter,
          deps: [MAT_DATE_LOCALE, Platform],
        },
      ],
    });
    const calendarIcon = screen.getByRole("calendarIcon");

    fireEvent.click(calendarIcon);
    expect(screen.getByText("DECEMBER 1995"));
    expect(
      screen.getByText("3").classList.contains("mat-calendar-body-selected")
    ).toBeTruthy();
    fireEvent.click(screen.getByText("4"));
    waitFor(() => {
      expect(onChange).toHaveBeenCalledWith({
        value: "04-12-1995",
        date: new Date("04/12/1995"),
      });
    });

    fireEvent.click(calendarIcon);

    expect(screen.getByText("DECEMBER 1995"));
    waitFor(() => {
      expect(
        screen.getByText("3").classList.contains("mat-calendar-body-selected")
      ).toBeTruthy();
    });
  });

  test("controlled dxc-date", async () => {
    const onChange = jest.fn();
    const onBlur = jest.fn();

    await render(DxcDateInputComponent, {
      componentProperties: {
        label: "test-input",
        value: "03-12-1995",
        defaultValue: "12-04-1995",
        onChange: {
          emit: onChange,
        } as any,
        onBlur: {
          emit: onBlur,
        } as any,
      },
      imports: [
        MatDayjsDateModule,
        MatNativeDateModule,
        MatInputModule,
        MatDatepickerModule,
        MdePopoverModule,
        DxcBoxModule,
        CommonModule,
        DxcTextInputModule,
      ],
      providers: [
        { provide: MAT_DATE_FORMATS, useValue: DAYJS_DATE_FORMATS },
        {
          provide: DateAdapter,
          useClass: DayjsDateAdapter,
          deps: [MAT_DATE_LOCALE, Platform],
        },
      ],
    });
    expect(screen.getByDisplayValue("03-12-1995"));
    const input = <HTMLInputElement>screen.getByRole("textbox");

    input.focus();
    fireEvent.input(input, { target: { value: "03-10-1996" } });
    expect(onChange).toHaveBeenCalledWith({
      value: "03-10-1996",
      error: undefined,
      date: new Date("1996/10/03"),
    });
    expect(screen.getByDisplayValue("03-12-1995"));
    fireEvent.blur(input);
    waitFor(() => {
      expect(onBlur).toHaveBeenCalledWith({
        error: undefined,
        value: "03-12-1995",
        date: new Date("1995/12/03"),
      });
    });
  });
});