Angular Material custom datepicker format throws error "format.replace is not a function"

Question

I am working on customising the date to the dd-mmm-yyy ie for eg 12-Feb-2019, working using the angular material 6 and this is my code, I have not used a replace function but yet get this error

The component file content

 import { MomentDateAdapter ,MatMomentDateModule } from '@angular/material-moment-adapter';
    import {DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE} from '@angular/material/core';
    import {MatDatepicker} from '@angular/material/datepicker';
    import {default as _rollupMoment, Moment} from 'moment';
    import * as _moment from 'moment';
export class MyDateAdapter extends NativeDateAdapter {
    // constructor() {
    //  super('en-US');
    // }

    format(date: Date, displayFormat: Object): string {
        if (displayFormat == "input") {
            let day = date.getDate();
            let month = date.getMonth() + 1;
            let year = date.getFullYear();
            return this._to2digit(day) + '/' + this._to2digit(month) + '/' + year;
        } else {
            return date.toDateString();
        }
    }

    private _to2digit(n: number) {
        return ('00' + n).slice(-2);
    } 


 }
    export const MY_FORMATS = {
        parse: {
          dateInput: 'LL',
        },
        display: {
            // dateInput: { month: 'short', year: 'numeric', day: 'numeric' },
            dateInput: 'input',
            monthYearLabel: {year: 'numeric', month: 'short'},
            dateA11yLabel: {year: 'numeric', month: 'long', day: 'numeric'},
            monthYearA11yLabel: {year: 'numeric', month: 'long'},
        }
      };

And the HTML part

<div class="col-lg-4 m-form__group-sub">
                                            <mat-form-field class="example-full-width" appearance="outline">
                                                <mat-label>Invoice Date</mat-label>
                                                <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="picker1" placeholder="Choose a date" formControlName="inv_date">
                                                <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
                                                <mat-datepicker #picker1></mat-datepicker>
                                            </mat-form-field>
                                        </div>

Africah

Answer 1

To have the UTC material datepicker behavior and specific date format:

1. Install @angular/material-moment-adapter and make sure moment lib also installed.
2. Import MatMomentDateModule.
3. Add { provide: MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: { useUtc: true }} to providers array of your module.
4. Optional. To override the display value in a datepicker, set a locale using: { provide: MAT_DATE_LOCALE, useValue: 'en-GB' } to have globally dd/M/yyyy format visually for the material datepicker

Starting from now, the material datepicker will work with UTC. Output of datepicker will be also UTC without adjustments for a time-zone.

For very advanced cases, go with a custom DateAdapter implementation and DateFormats instead of everything above. {provide: DateAdapter, useClass: MyDateAdapter}, {provide: MAT_DATE_FORMATS, useValue: MY_DATE_FORMATS}

For additional info, look at material API docs

Fernandes

Answer 2

In my case, I've checked the file webpack:///./node_modules/@angular/material/esm5/datepicker.es5.js line 1630 and when I received a Moment date object as value, I had format.replace error.

I used the NativeDateAdapter from angular/core on my custom component and the error disappeared (I'm overriding in my app.module with MomentDateAdapter).

In your case, I think you can try to return a replace function from your own format function.

Phocine

Answer 3

Faced the same issue with angular/material 10. Importing MatNativeDateModule solved the issue on my side.

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

Complement

Answer 4

Its also essential to provide the MAT_DATE_FORMATS in your component using the date formats object you have created as the value.

...
import { MAT_DATE_FORMATS } from "@angular/material/core";

@Component({
  selector: "my-component",
  templateUrl: "./my.component.html",
  styleUrls: ["./my.component.scss"],
  providers: [{ provide: MAT_DATE_FORMATS, useValue: MY_DATE_FORMATS }],
})

Entozoic

Why should we have to do this if it is provided in the app.module? – Luiseluiza

Answer 5

In my case I was importing and exporting MatNativeDateModule so I delete the exports, and works fine!

So this is my code

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    MatDatepickerModule,
    MatFormFieldModule,
    MatNativeDateModule,
    ReactiveFormsModule,
    MatInputModule
  ],
  declarations: [DiaryPage]
})
export class DiaryPageModule {}

Jacintojack

Answer 6

no answers solved my problem. this work for me:

export const CUSTOM_DATE_TIME_FORMAT: MatDateFormats = {
  parse: {
    dateInput: 'L LT',
  },
  display: {
    dateInput: 'L LT',
    monthYearLabel: 'MMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY',
  },
};

@NgModule({
  declarations: [
    { provide: MAT_DATE_FORMATS, useValue: CUSTOM_DATE_TIME_FORMAT}
  ]
})
export class SomeModule {}

Intensive

Answer 7

just import MatMomentDateModule in the app.module.ts after install angular material

Spillman