How can I customize date and time format in ngx-mat-datetime-picker?

Question

I am working on Angular7 and its compatible ngx-mat-datetime-picker. It works as expected.

Want to customize the format:

Actual: mm/dd/yyyy, hh:mm:ss Expected: yyyy-mm-dd hh:mm:ss

Currently I don't find any option for formatting.

I tried something like this in template value="{{ mydate | date: 'yyyy-mm-dd hh:mm:ss' }}

But not working.

Tatiania

Answer 1

You need to create a custom adapter and specify the custom formats

const CUSTOM_DATE_FORMATS: NgxMatDateFormats = {
  parse: {
    dateInput: 'l, LTS'
  },
  display: {
    dateInput: 'YYYY-MM-DD HH:mm:ss',
    monthYearLabel: 'MMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY',
  }
};

@NgModule({
  providers: [
    {
      provide: NgxMatDateAdapter,
      useClass: CustomNgxDatetimeAdapter,
      deps: [MAT_DATE_LOCALE, NGX_MAT_MOMENT_DATE_ADAPTER_OPTIONS]
    },
    { provide: NGX_MAT_DATE_FORMATS, useValue: CUSTOM_DATE_FORMATS }
  ],
})
export class CustomNgxDateTimeModule { }

Please find the CustomNgxDatetimeAdapter.ts from the below gist

https://gist.github.com/nandhakumargdr/635af05419793e15f3758656ddd1ef39

Have tested it. It is working!

Schleicher

Let me know if you need the CustomNgxDatetimeAdapter class. I'll update the answer with the CustomNgxDatetimeAdapter code. – Schleicher

Please add CustomNgxDatetimeAdapter class – Jarret

Edited the answer please find the gist – Schleicher

gist.github.com/nandhakumargdr/635af05419793e15f3758656ddd1ef39 - Anyway I'm attaching it here. – Schleicher

@NandhakumarAppusamy Could you please post a full working example? And is it possible to switch between local time and UTC at runtime? – Libido

It is working, Thank you for saving the day. Extremely thank you. – Ganny

What if you change the locale dynamically? is it not stuck on this format? – Dorene

yes, how to we achieve for changing the locale dynamically – Amazing

to change the dateformat do we need to add this as well? i thought it should be pretty straightforward – Eyeball

@NandhakumarAppusamy can you please help in this #78648044 – Eyeball

Answer 2

This is the best solution i found

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,
    ],
    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 AppModule { }

Impassable

Answer 3

Create a constant: (insert your preferred format)

export const DATE_TIME_FORMAT = {
  parse: {
    dateInput: 'l, LT',
  },
  display: {
    dateInput: 'l, LT',
    monthYearLabel: 'MM yyyy',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY',
  }

Provide:

{provide: NGX_MAT_DATE_FORMATS, useValue: DATE_TIME_FORMAT}

result (with my format removing the seconds):

9/4/2020, 1:11 PM

Monogram

Answer 4

You can find more examples here https://github.com/h2qutc/angular-material-components/issues/27

Eddington

Is it be possible to customize the ngx-mat-datetime-picker to be used as a datetime range component ( from ... to) ? – Lipfert