Unclear documentation about date format about angular-material-components HOT 10 OPEN

Agreed. For those stumbling along trying to get this to work with Moment here are the critical pieces barely mentioned.

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

export const CUSTOM_MOMENT_FORMATS  = {
  parse: {
    dateInput: "l, LT"
  },
  display: {
    dateInput: "l, LT",
    monthYearLabel: "MMM YYYY",
    dateA11yLabel: "LL",
    monthYearA11yLabel: "MMMM YYYY"
  }
};

@NgModule({
	imports: [
	  NgxMatMomentModule,
          NgxMatDatetimePickerModule,
          NgxMatTimepickerModule,
          ... ],
       providers: [
         { provide: NGX_MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: { useUtc: true } },
         { provide: NGX_MAT_DATE_FORMATS, useValue: CUSTOM_MOMENT_FORMATS },  
         { provide: NgxMatDateAdapter, useClass: NgxMatMomentAdapter },
         ... ]
})

It's a great and flexible component! It could really use some thorough documentation.

from angular-material-components.

Agreed. For those stumbling along trying to get this to work with Moment here are the critical pieces barely mentioned.

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

export const CUSTOM_MOMENT_FORMATS  = {
  parse: {
    dateInput: "l, LT"
  },
  display: {
    dateInput: "l, LT",
    monthYearLabel: "MMM YYYY",
    dateA11yLabel: "LL",
    monthYearA11yLabel: "MMMM YYYY"
  }
};

@NgModule({
	imports: [
	  NgxMatMomentModule,
          NgxMatDatetimePickerModule,
          NgxMatTimepickerModule,
          ... ],
       providers: [
         { provide: NGX_MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: { useUtc: true } },
         { provide: NGX_MAT_DATE_FORMATS, useValue: CUSTOM_MOMENT_FORMATS },  
         { provide: NgxMatDateAdapter, useClass: NgxMatMomentAdapter },
         ... ]
})

It's a great and flexible component! It could really use some thorough documentation.

Thank you!

from angular-material-components.

For anybody else who gets stuck on this, I was wanting to use the time picker only.

I got it to work minimally with the following:

import {
	NgxMatTimepickerModule,
	NgxMatDateAdapter,
	NgxMatNativeDateAdapter
} from '@angular-material-components/datetime-picker';

@NgModule({
	imports: [
		NgxMatTimepickerModule,

	providers: [
		{ provide: NgxMatDateAdapter, useClass: NgxMatNativeDateAdapter },

Hope that helps somebody.

I like this library but the documentation could be better. And the StackBlitz example has errors!

from angular-material-components.

Agreed. For those stumbling along trying to get this to work with Moment here are the critical pieces barely mentioned.

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

export const CUSTOM_MOMENT_FORMATS  = {
  parse: {
    dateInput: "l, LT"
  },
  display: {
    dateInput: "l, LT",
    monthYearLabel: "MMM YYYY",
    dateA11yLabel: "LL",
    monthYearA11yLabel: "MMMM YYYY"
  }
};

@NgModule({
	imports: [
	  NgxMatMomentModule,
          NgxMatDatetimePickerModule,
          NgxMatTimepickerModule,
          ... ],
       providers: [
         { provide: NGX_MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: { useUtc: true } },
         { provide: NGX_MAT_DATE_FORMATS, useValue: CUSTOM_MOMENT_FORMATS },  
         { provide: NgxMatDateAdapter, useClass: NgxMatMomentAdapter },
         ... ]
})

It's a great and flexible component! It could really use some thorough documentation.

Thank you!

I spent days and hours on this, thanks !

from angular-material-components.

Agreed. For those stumbling along trying to get this to work with Moment here are the critical pieces barely mentioned.

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

export const CUSTOM_MOMENT_FORMATS  = {
  parse: {
    dateInput: "l, LT"
  },
  display: {
    dateInput: "l, LT",
    monthYearLabel: "MMM YYYY",
    dateA11yLabel: "LL",
    monthYearA11yLabel: "MMMM YYYY"
  }
};

@NgModule({
	imports: [
	  NgxMatMomentModule,
          NgxMatDatetimePickerModule,
          NgxMatTimepickerModule,
          ... ],
       providers: [
         { provide: NGX_MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: { useUtc: true } },
         { provide: NGX_MAT_DATE_FORMATS, useValue: CUSTOM_MOMENT_FORMATS },  
         { provide: NgxMatDateAdapter, useClass: NgxMatMomentAdapter },
         ... ]
})

It's a great and flexible component! It could really use some thorough documentation.

Thank you so much!!! It saved several hours/days of my life!!!

from angular-material-components.

Agreed. For those stumbling along trying to get this to work with Moment here are the critical pieces barely mentioned.

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

export const CUSTOM_MOMENT_FORMATS  = {
  parse: {
    dateInput: "l, LT"
  },
  display: {
    dateInput: "l, LT",
    monthYearLabel: "MMM YYYY",
    dateA11yLabel: "LL",
    monthYearA11yLabel: "MMMM YYYY"
  }
};

@NgModule({
	imports: [
	  NgxMatMomentModule,
          NgxMatDatetimePickerModule,
          NgxMatTimepickerModule,
          ... ],
       providers: [
         { provide: NGX_MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: { useUtc: true } },
         { provide: NGX_MAT_DATE_FORMATS, useValue: CUSTOM_MOMENT_FORMATS },  
         { provide: NgxMatDateAdapter, useClass: NgxMatMomentAdapter },
         ... ]
})

It's a great and flexible component! It could really use some thorough documentation.

Thank you so much!!! It saved several hours/days of my life!!!

from angular-material-components.

Agreed. For those stumbling along trying to get this to work with Moment here are the critical pieces barely mentioned.

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

export const CUSTOM_MOMENT_FORMATS  = {
  parse: {
    dateInput: "l, LT"
  },
  display: {
    dateInput: "l, LT",
    monthYearLabel: "MMM YYYY",
    dateA11yLabel: "LL",
    monthYearA11yLabel: "MMMM YYYY"
  }
};

@NgModule({
	imports: [
	  NgxMatMomentModule,
          NgxMatDatetimePickerModule,
          NgxMatTimepickerModule,
          ... ],
       providers: [
         { provide: NGX_MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: { useUtc: true } },
         { provide: NGX_MAT_DATE_FORMATS, useValue: CUSTOM_MOMENT_FORMATS },  
         { provide: NgxMatDateAdapter, useClass: NgxMatMomentAdapter },
         ... ]
})

It's a great and flexible component! It could really use some thorough documentation.

I'm very grateful, thank you for making my life easier

from angular-material-components.

For anybody else who gets stuck on this, I was wanting to use the time picker only.

I got it to work minimally with the following:

import {
	NgxMatTimepickerModule,
	NgxMatDateAdapter,
	NgxMatNativeDateAdapter
} from '@angular-material-components/datetime-picker';

@NgModule({
	imports: [
		NgxMatTimepickerModule,

	providers: [
		{ provide: NgxMatDateAdapter, useClass: NgxMatNativeDateAdapter },

Hope that helps somebody.

I like this library but the documentation could be better. And the StackBlitz example has errors!

Solved my problem, thank you very much!

from angular-material-components.

Using

@angular-material-components/datetime-picker": "^7.0.1",
@angular-material-components/moment-adapter": "^7.0.0"

I had to put NgxMatNativeDateModule before NgxMatMomentModule to get the custom date format working.

    NgxMatNativeDateModule, // must be before NgxMatMomentModule
    NgxMatMomentModule,
    NgxMatDatetimePickerModule,
    NgxMatTimepickerModule,

from angular-material-components.

Agreed. For those stumbling along trying to get this to work with Moment here are the critical pieces barely mentioned.

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

export const CUSTOM_MOMENT_FORMATS  = {
  parse: {
    dateInput: "l, LT"
  },
  display: {
    dateInput: "l, LT",
    monthYearLabel: "MMM YYYY",
    dateA11yLabel: "LL",
    monthYearA11yLabel: "MMMM YYYY"
  }
};

@NgModule({
	imports: [
	  NgxMatMomentModule,
          NgxMatDatetimePickerModule,
          NgxMatTimepickerModule,
          ... ],
       providers: [
         { provide: NGX_MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: { useUtc: true } },
         { provide: NGX_MAT_DATE_FORMATS, useValue: CUSTOM_MOMENT_FORMATS },  
         { provide: NgxMatDateAdapter, useClass: NgxMatMomentAdapter },
         ... ]
})

It's a great and flexible component! It could really use some thorough documentation.

Thanks, I wish the official doc was this clear.

from angular-material-components.