Issue with format and parse

[FierkaMichal]

Hi,

I have a problem with formatting date on input. Providing MAT_DATE_FORMATS with display.dateInput seems to always concating HH:mm:ss.

Even overriding NativeDateAdapter format function does not help.

Another problem is with NativeDateAdapter.parse function - when overrided program does not invoke it.

[lichr]

Hi,

I have similar issue, in my case I am using a custom date-adapter to format moment object into a string with 12 hr-clock with am / pm part like:

Friday, January 24th 2020, 4:50:04 pm

However what I got is: Friday, January 24th 2020, 4:50:04 pm 16:50:04

I wonder if it is possible to override how time part is formatted and allow a custom date adapter to format / parse the whole string.

[klimtron]

True, it would be great to have a simple way to config the display date-time format.

[klimtron]

While I was trying to do something about it, now I know that it can't be formatted with moment's format(): let newdate = moment(event.target.value).format("D-MM-YYYY HH:mm");

However I've found a way to change the date format using custom dateAdapter but i still can't force time to display HH:ss

export const MY_FORMATS = {
    parse: {
      dateInput: 'DD-MM-YYYY',
      timeInput: 'HH:mm'
    },
      display: {
      dateInput: 'DD-MM-YYYY',
      timeInput: 'HH:mm',
      monthYearLabel: 'MMM YYYY',
      dateA11yLabel: 'LL',
      monthYearA11yLabel: 'MMMM YYYY',
    },
};

[khalilou88]

Same probleme here, I can't change timeInput from HH:mm:ss to HH:mm

[h2qutc]

Hi, this bug is fixed in version v2.0.1. Now you can config the display date-time format by using custom formats. Something like that:

export const CUSTOM_FORMATS = { parse: { dateInput: { year: 'numeric', month: 'numeric', day: 'numeric', hour12: false, hour: "2-digit", minute: "2-digit", second: "2-digit" }, }, display: { dateInput: 'DD-MM-YYYY', timeInput: 'HH:mm', monthYearLabel: 'MMM YYYY', dateA11yLabel: 'LL', monthYearA11yLabel: 'MMMM YYYY', }, };

[klimtron]

@h2qutc I still have problem with forcing time to display HH:mm... :/ But I'm working on it supported by readme.

[h2qutc]

@klimtron, If you want to change HH:mm:ss to HH:m and if you use Native Date, you can try:

export const NGX_MAT_NATIVE_DATE_FORMATS: MatDateFormats = {
  parse: {
    dateInput: {
      year: 'numeric', month: 'numeric', day: 'numeric',
      hour12: false, hour: "2-digit", minute: "2-digit"
    },
  },
  display: {
    dateInput: {
      year: 'numeric', month: 'numeric', day: 'numeric',
      hour12: false, hour: "2-digit", minute: "2-digit"
    },
    monthYearLabel: { year: 'numeric', month: 'short' },
    dateA11yLabel: { year: 'numeric', month: 'long', day: 'numeric' },
    monthYearA11yLabel: { year: 'numeric', month: 'long' },
  }
};

If you use Moment or others, you always can change the property dateInput of custom date formats.

[klimtron]

@h2qutc I did add this to app.module.ts:

  providers: [
        MatDatepickerModule,
        { 
            provide: MAT_DATE_FORMATS,
            useValue: {
            parse: {
                dateInput: ['D/M/YYYY', 'LT'],
                timeInput: 'LT',
            },
            display: {
                timeInput: 'LT',
                dateInput: 'D-M-YYYY',
                monthYearLabel: 'MMM YYYY',
                dateA11yLabel: 'D/M/YYYY',
                monthYearA11yLabel: 'MMMM YYYY',
            },
            },
        },
        NgxMatMomentAdapter,
    ],

and in my component:

import {MomentDateAdapter, MAT_MOMENT_DATE_ADAPTER_OPTIONS} from '@angular/material-moment-adapter';
import {DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE} from '@angular/material/core';
import { NgxMatMomentAdapter  } from 'ngx-mat-moment-adapter'

export const MY_FORMATS = {
    parse: {
        dateInput: ['D/M/YYYY', 'HH:mm'],
        timeInput: 'LT',
    },
    display: {
        timeInput: 'HH:mm',
        dateInput: 'D/M/YYYY',
        monthYearLabel: 'MMM YYYY',
        dateA11yLabel: 'D/M/YYYY',
        monthYearA11yLabel: 'MMMM YYYY',
    },
};

@Component({
...
    providers: [
        {
            provide: NgxMatMomentAdapter,
            useClass: MomentDateAdapter,
            deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS]
        },
         {provide: MAT_DATE_FORMATS, useValue: MY_FORMATS},
        ],

When I use it like this the datetime input display only date without time. I can change the format of it but what i need is to remove seconds from full date-time data. Probably I messed up something.

[h2qutc]

Hi, MAT_DATE_FORMATS has not the property timeInput. The display time is config by using dateInput. In your example, you'd better do like that:

export const MY_FORMATS = {
    parse: {
        dateInput: ['D/M/YYYY', 'HH:mm'],
        //timeInput: 'LT',
    },
    display: {
        //timeInput: 'HH:mm',
        dateInput: 'D/M/YYYY HH:mm',
        monthYearLabel: 'MMM YYYY',
        dateA11yLabel: 'D/M/YYYY',
        monthYearA11yLabel: 'MMMM YYYY',
    },
};

[klimtron]

@h2qutc Of course! many thanks for helping me out!

[h2qutc]

@klimtron you are welcome ^.^. Use the version v2.0.1 for better performance.