How to set format date when I'm using NgxMatNativeDateModule?

[Mateusz19021996]

How to set this date? I need to use NgxMatNativeDateModule but i don't know how to format date.

<mat-form-field>
              <input matInput [ngxMatDatetimePicker]="picker" [formControl]="dateControl"
                [max]="getMaxDate()" [min]="getMinDate()" (blur)="onBlur()">
              <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
              <ngx-mat-datetime-picker #picker>
                <ng-template>
                  <mat-icon>star</mat-icon>
                </ng-template>
              </ngx-mat-datetime-picker>
            </mat-form-field>

all works , but Im not able to set time format (it display seconds in input, I want to display only date and hh:mm)

When Im using { provide: NGX_MAT_DATE_FORMATS, useValue: CUSTOM_DATE_FORMATS } it not works...

[bah99]

Hello @Mateusz19021996 , you can do something like this. Don't forget to update MOMENT_DATETIME_FORMAT_EN to the format you want and set the locale via the date adapter.

See https://github.com/h2qutc/angular-material-components/issues/307#issuecomment-2060779585 to make it work.

[Mateusz19021996]

Hello @bah99 , thanks for response. From where You take NGX_MAT_MOMENT_DATE_ADAPTER_OPTIONS ? Also please check, that date which is go to input of datetimepicker is from fromControl.. how in that way change format of that?

[bah99]

Hi @Mateusz19021996 , here how you can import it import { NGX_MAT_MOMENT_DATE_ADAPTER_OPTIONS } from '@angular-material-components/moment-adapter'; I don't understand what do you mean in the second question, please can you clarify what you mean?

[Will-at-FreedomDev]

With NgxMatNativeDateModule, you can use https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat formatting to format the date.

I used this code to format my display date like M/d/yy h:mm a, but you can modify the first variable to your liking.

const INTL_DATE_INPUT_FORMAT = {
  year: "2-digit",
  month: "numeric",
  day: "numeric",
  hourCycle: "h23",
  hour: "numeric",
  minute: "2-digit",
  hour12: true,
};

const MAT_DATE_FORMATS: NgxMatDateFormats = {
  parse: {
    dateInput: INTL_DATE_INPUT_FORMAT,
  },
  display: {
    dateInput: INTL_DATE_INPUT_FORMAT,
    monthYearLabel: { year: "numeric", month: "short" },
    dateA11yLabel: { year: "numeric", month: "long", day: "numeric" },
    monthYearA11yLabel: { year: "numeric", month: "long" },
  },
};

// providers: [{ provide: NGX_MAT_DATE_FORMATS, useValue: MAT_DATE_FORMATS }],

[Mateusz19021996]

Hi @Will-at-FreedomDev , what do You mean that I can modify this first variable like i want? I want to have dd/mm/yyyy HH:ss but I cannot achieve it ;/

Hi @bah99 , Your solution doesn't work for me ;/

I'm using angular 16 , don't know why it still doesn't works ;/

[bah99]

Hey @Mateusz19021996, I've noticed a mistake in my previous message. Instead of DateAdapter, please use NgxDateAdapter.

constructor(
  private ngxDateAdapter: NgxMatDateAdapter<Date>
) {
  this.ngxDateAdapter.setLocale(this.data?.locale || 'en');
}

I hope this clears things up!

[Mateusz19021996]

Hello @bah99 , unfortunately it's still doesn't works properly... ;/ date is still same format ;/

[bah99]

Hello @Mateusz19021996 sorry to hear that. It seems you might have missed something because it's working perfectly for me, I'm currently running Angular V17.3.

[bah99]

Hi @Mateusz19021996, I've just tested two custom formats: one based on values (single format) and another based on classes (multi format), and both worked perfectly. Please find the attached code samples for reference.

please dont forget to add in your app.module.ts { provide: NgxMatDateAdapter, useClass: NgxMatMomentAdapter }, imported from import { NgxMatDateAdapter } from '@angular-material-components/datetime-picker'; and import { NgxMatMomentAdapter } from '@angular-material-components/moment-adapter';.

[Mateusz19021996]

Hello @bah99 for first thanks a lot for Your responses :) Unfortunatelly it still doesn't work... ;/ I create reproduction on stackblitz, could You please check? https://stackblitz.com/edit/angular-save-to-pdf-export-c87ehd?file=src%2Fapp%2Fapp.module.ts

[bah99]

Hello @Mateusz19021996, thank you for sharing the production link. It helped me a lot in identifying the issue you encountered. The problem was caused by a missing provider in the app module: { provide: NgxMatDateAdapter, useClass: NgxMatMomentAdapter }, imported from import { NgxMatDateAdapter } from '@angular-material-components/datetime-picker'; and import { NgxMatMomentAdapter } from '@angular-material-components/moment-adapter';.

Now it's fixed! Here's the updated StackBlitz link addressing the issue: StackBlitz Link.

See the documentation for more help: https://h2qutc.github.io/angular-material-components/#/datetimepicker

I hope this resolves your problem. Please let me know if you need any further assistance.

[Mateusz19021996]

@bah99 my oversight .... so much thanks to You ! !