Cannot configure custom dateformat in NgxDatetimepicker

56 views Asked by At

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

0

There are 0 answers