Facing issues while using angular material Datepicker

Question

I'm trying to use basic date picker from angular material website.

<span class="calendar">
            <mat-form-field appearance="outline">
                <mat-label>Date</mat-label>
                <input                
                 matInput 
                 [matDatepicker]="picker">
                <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
                <mat-datepicker #picker></mat-datepicker>
              </mat-form-field>
</span>  

But i get the below error when I click on datepicker

core.js:6185 ERROR TypeError: format.replace is not a function
    at expandFormat (moment.js:537)
    at formatMoment (moment.js:521)
    at Moment.format (moment.js:3975)
    at MomentDateAdapter.format (material-moment-adapter.js:126)
    at MatCalendarHeader.get periodButtonText [as periodButtonText] (datepicker.js:2094)
    at MatCalendarHeader_Template (datepicker.js:2233)
    at executeTemplate (core.js:11949)
    at refreshView (core.js:11796)
    at refreshComponent (core.js:13229)
    at refreshChildComponents (core.js:11527)

But when try the same code in stack blitz it works. Also I'm importing import and exporting { MatDatepickerModule } from '@angular/material/datepicker'; in module. It does not work.

Can you guys please advise

Answer 1

My dear friend, I had this problem before and this is how my problem was solved:

The date.format is not a function error occurs because the format method is not implemented in JavaScript. To solve the error, use a third-party package to format your dates, e.g. moment or date-fns.

Here is an example of how the error occurs.

//index.js

const date = new Date();

// TypeError; date.format is not a function
const result = date.format('MM-DD-YYYY');

This is because a format method is not natively implemented in JavaScript.

To solve the error, you can install a third-party package like moment or date-fns.

At first you should install this:

npm i date-fns

Now, you can use the format function in the following way:

//index.js
import {format} from 'date-fns';

const d1 = new Date('Sept 24, 22 13:20:18');

const result = format(d1, 'yyyy-MM-dd');
console.log(result); // 👉️ 2022-09-24

Note that if your project does not have a package.json file yet, you would have to create one using the npm init -y command.

Also, You can achieve the same result by using the moment package, which is also very popular.

To install the package, run the following command:

npm i moment

Now, you can format a date in the following way:

//index.js

import moment from 'moment';

const d1 = new Date();
console.log(d1);

const result = moment(d1).format('MM-DD-YYYY');
console.log(result); // 👉️ 12-16-2021

You can check the description of this link. This site suggests that the better, more modern alternative date-fns should always be preferred when formatting dates.

Answer 2

I've managed to solve the problem. I've imported MatNativeDateModule and MatNativeDatetimeModule, but in order for moment to work you need to import MatMomentDateModule and MatMomentDatetimeModule