Set locale or utc for timepicker

[ghost]

Is there any possibility to set the locale used by the datetime picker or set it to utc?

I provide a time in utc but it gets converted to locale timezone which should not happen.

[h2qutc]

Hi, If you want to set the locale used by datetimepicker, you can provide a new value for the MAT_DATE_LOCALE token:

@NgModule({
  providers: [
    {provide: MAT_DATE_LOCALE, useValue: 'en-GB'},
  ],
})
export class MyApp {}

To set to UTC, you can either create a custom Adapter

@Injectable()
export class CustomDateAdapter extends NgxMatDateAdapter<D> {...}
// D can be Date, Moment or customized type

Or If you use NgxMatMomentAdapter, you can override the token MAT_MOMENT_DATE_ADAPTER_OPTIONS:

@NgModule({
  providers: [
    {provide: MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: { useUtc: true }},
  ],
})
export class MyApp {}

[mauriciabad]

If I just do this into my module ts file:

@NgModule({
  providers: [
    {provide: MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: { useUtc: true }},
  ],
})
export class MyApp {}

It gives this error:

Cannot find name 'MAT_MOMENT_DATE_ADAPTER_OPTIONS'. ts(2304)

And if I add MAT_MOMENT_DATE_ADAPTER_OPTIONS to the import I get another error:

Module '"node_modules/@angular-material-components/datetime-picker/angular-material-components-datetime-picker"' has no exported member 'MAT_MOMENT_DATE_ADAPTER_OPTIONS'. ts(2305)

How do I use MAT_MOMENT_DATE_ADAPTER_OPTIONS if it can't be imported. Where does it come from?

[mauriciabad]

OK I found where it comes from, I had to install the @angular/material-moment-adapter package and import it from there

import { MAT_MOMENT_DATE_ADAPTER_OPTIONS } from '@angular/material-moment-adapter';

[NickChapman]

How exactly do you use the NgxMatMomentAdapter, the docs aren't quite clear on how you select one or the other.

[peterdkdp]

Same question as Nick, because I can't get this {provide: MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: { useUtc: true }}, to work. It works with the native MatDatepicker module, but I need time as well so I want to use this NgxMatDatetimePickerModule

In the console I get _isUtc: false

[peterdkdp]

Same question as Nick, because I can't get this {provide: MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: { useUtc: true }}, to work. It works with the native MatDatepicker module, but I need time as well so I want to use this NgxMatDatetimePickerModule

In the console I get _isUtc: false

Ok, I found this link: https://h2qutc.github.io/angular-material-components/datetimepicker And it seems that I needed to use: NGX_MAT_MOMENT_DATE_ADAPTER_OPTIONS

[wwjd1234]

See: https://www.gitmemory.com/issue/h2qutc/angular-material-components/27/644985390

Worked for me.

import { // modules NgxMatDatetimePickerModule, NgxMatDateFormats, NGX_MAT_DATE_FORMATS, } from '@angular-material-components/datetime-picker'; import {NgxMatMomentModule, NGX_MAT_MOMENT_DATE_ADAPTER_OPTIONS} from '@angular-material-components/moment-adapter';

export const MOMENT_DATETIME_WITH_SECONDS_FORMAT = 'YYYY-MM-DD HH:mm:ss';

// If using Moment const CUSTOM_MOMENT_FORMATS: NgxMatDateFormats = { parse: { dateInput: MOMENT_DATETIME_WITH_SECONDS_FORMAT, }, display: { dateInput: MOMENT_DATETIME_WITH_SECONDS_FORMAT, monthYearLabel: 'MMM YYYY', dateA11yLabel: 'LL', monthYearA11yLabel: 'MMMM YYYY', }, };

@NgModule({ declarations: [], imports: [ MatDatepickerModule, MatMomentDateModule, NgxMatMomentModule, NgxMatDatetimePickerModule, ], exports: [ MatDatepickerModule, MatMomentDateModule, NgxMatMomentModule, NgxMatDatetimePickerModule, ], entryComponents: [ConfirmationDialogComponent], providers: [ // values {provide: MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: {useUtc: true}}, {provide: NGX_MAT_DATE_FORMATS, useValue: CUSTOM_MOMENT_FORMATS}, {provide: NGX_MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: {useUtc: true}}, ], }) export class SharedModule {}

[MuthuM3]

It worked for me too. Thank You