问题
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>
回答1:
To have the UTC material datepicker behavior and specific date format:
- Install
@angular/material-moment-adapter
and make suremoment
lib also installed. - Import
MatMomentDateModule
. - Add
{ provide: MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: { useUtc: true }}
to providers array of your module. - 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
回答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.
回答3:
just import MatMomentDateModule in the app.module.ts after install angular material
回答4:
Faced the same issue with angular/material 10. Importing MatNativeDateModule
solved the issue on my side.
import { MatNativeDateModule } from '@angular/material/core';
来源:https://stackoverflow.com/questions/54867168/angular-material-custom-datepicker-format-throws-error-format-replace-is-not-a