Reputation: 45
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
Upvotes: 2
Views: 1094
Reputation: 761
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.
Upvotes: 1
Reputation: 608
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
Upvotes: 0