I want to have custom date format using my datetime picker from ngx (https://www.npmjs.com/package/@angular-material-components/datetime-picker). I have following configuration in my appmodule.ts:
const CUSTOM_DATE_FORMATS: NgxMatDateFormats = {
parse: {
dateInput: 'DD/MM/YYYY HH:mm',
},
display: {
dateInput: 'DD/MM/YYYY HH:mm',
monthYearLabel: "MMM YYYY",
dateA11yLabel: "LL",
monthYearA11yLabel: "MMMM YYYY"
}
};
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
ReactiveFormsModule,
MatInputModule,
// ngx
NgxMatMomentModule,
NgxMatDatetimePickerModule,
NgxMatTimepickerModule,
NgxMatNativeDateModule,
NgxMatMomentModule,
NgxMatDatetimePickerModule,
],
providers:[
{ provide: NGX_MAT_DATE_FORMATS, useValue: CUSTOM_DATE_FORMATS }
],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule {}
and HTML
<mat-form-field>
<input matInput [ngxMatDatetimePicker]="pickerCustomIcon" placeholder="Choose a date">
<ngx-mat-datepicker-toggle matSuffix [for]="pickerCustomIcon"></ngx-mat-datepicker-toggle>
<ngx-mat-datetime-picker #pickerCustomIcon [showSeconds]="false">
<ngx-mat-datepicker-actions>
<button mat-button ngxMatDatepickerCancel>Cancel</button>
<button mat-raised-button color="primary" ngxMatDatepickerApply>Apply</button>
</ngx-mat-datepicker-actions>
</ngx-mat-datetime-picker>
</mat-form-field>
Why it is not working? stackblitz for reference: https://stackblitz.com/edit/angular-kd5bdu?file=src%2Fapp%2Fapp.component.html