"moment" has no exported member 'default' "moment" has no exported member 'default' angular angular

"moment" has no exported member 'default'


Try adding "allowSyntheticDefaultImports": true to your tsconfig.json under the "compilerOptions"


You seems to have trouble importing moment

As you can see in the documentation, For Typescript 2.x try adding "moduleResolution": "node" in compilerOptions in your tsconfig.json file and then use any of the below syntax:

import * as moment from 'moment';import moment = require('moment');

PS: Make sure you have installed moment.js with npm:

npm install --save moment


Here you go with a complete solution to this problem:

First:

 npm install moment --save npm install @angular/material-moment-adapter

Second:

in your package.json under dependencies make sure you have the following code:

    "@angular/material-moment-adapter": "^8.2.3",

Third:

in your tsconfig.json file under compileroptions add the following:

"allowSyntheticDefaultImports": true

Forth:

Modify your component with the following codes:

import { MomentDateAdapter } from '@angular/material-moment-adapter';import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';import * as _moment from 'moment';import { default as _rollupMoment } from 'moment';const moment = _rollupMoment || _moment;export const MY_FORMATS = {parse: {  dateInput: 'LL',},display: {  dateInput: 'YYYY-MM-DD',  monthYearLabel: 'YYYY',  dateA11yLabel: 'LL',  monthYearA11yLabel: 'YYYY', },};@Component({ selector: 'app-newsfeedform', templateUrl: './newsfeedform.component.html', styleUrls: ['./newsfeedform.component.css'], providers: [  { provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] },  { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS },],})

Fifth:

In your component.html file datepicker like bellow code:

     <mat-form-field appearance="outline" fxFlex>                    <input matInput [matDatepicker]="publishdate" placeholder="Publish Date"                        formControlName="publishdate">                    <mat-datepicker-toggle matSuffix [for]="publishdate"></mat-datepicker-toggle>                    <mat-datepicker #publishdate></mat-datepicker>                </mat-form-field>

That is it you can customize Angular material datepicker any format you want just modify the format given above.