J'utilise moment.js
pour modifier le format de date local pour mon application mais en obtenant l'erreur suivante:
"moment" n'a pas de membre exporté 'par défaut' lors de l'importation de la bibliothèque.
Voici mon code:
import {Inject, Injectable, Optional} from '@angular/core';
import {DateAdapter, MAT_DATE_LOCALE, MatDateFormats} from '@angular/material';
import * as _moment from 'moment';
import {default as _rollupMoment, Moment} from 'moment';
const moment = _rollupMoment || _moment;
Essayez d'ajouter "allowSyntheticDefaultImports": true
à ton tsconfig.json
sous les "options de compilation"
Vous semblez avoir du mal à importer moment
Comme vous pouvez le voir dans la documentation , pour TypeScript 2.x essayez d'ajouter "moduleResolution": "node"
dans compilerOptions
dans votre tsconfig.json
fichier, puis utilisez l'une des syntaxes ci-dessous:
import * as moment from 'moment';
import moment = require('moment');
PS: assurez-vous d'avoir installé moment.js
avec npm
:
npm install --save moment
in gulpfile.js in section externals add 'moment/moment'
et 'moment'
tous les deux
externals: [
'moment/moment',
'moment'
]
Voici une solution complète à ce problème:
Première:
npm install moment --save
npm install @angular/material-moment-adapter
Seconde:
dans votre package.json sous dépendances, assurez-vous que vous disposez du code suivant:
"@angular/material-moment-adapter": "^8.2.3",
Troisième:
dans votre fichier tsconfig.json sous options de compilation, ajoutez ce qui suit:
"allowSyntheticDefaultImports": true
Quatrième:
Modifiez votre composant avec les codes suivants:
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 },
],
})
Cinquième:
Dans votre fichier component.html datepicker comme le code ci-dessous:
<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>
Voilà, vous pouvez personnaliser Angular matériel datepicker n'importe quel format que vous souhaitez simplement modifier le format donné ci-dessus.