ANGULAR format of selected date is not displaying correctly

Question

I use the NgxMatDatetimePickerModule to get a date picker which is capable for selecting date and time in both browsers (chrome and safari).It is working perfectly fine.

My problem is displaying the format. it is only showing dd/mm/yyyy.

How can I fix this? I need a solution which is working for chrome and safari.

thanks

 <div class="field">
            <label class="label">Date & Time</label>
            <div class="control">
              <input
                matInput
                [ngxMatDatetimePicker]="picker"
                #date="ngModel"
                [(ngModel)]="manualData.date"
                name="date"
                class="input"
                style="width: 175px"
                placeholder="YYYY-MM-DD HH:mm:ss"
                required
              />
              <mat-datepicker-toggle
                matSuffix
                [for]="picker"
              ></mat-datepicker-toggle>
              <ngx-mat-datetime-picker
                #picker
                [showSpinners]="showSpinners"
                [showSeconds]="showSeconds"
                [stepHour]="stepHour"
                [stepMinute]="stepMinute"
                [stepSecond]="stepSecond"
                [touchUi]="touchUi"
                [color]="color"
              >
              </ngx-mat-datetime-picker>
              <p class="help is-danger" *ngIf="date.invalid">
                This field is required
              </p>
            </div>
          </div>

Check this: https://stackoverflow.com/a/66540499/12113049 – Eranki Mar 11 '21 at 08:55 — Eranki, Mar 11 '21 at 08:55

score 2 · Accepted Answer · answered Mar 11 '21 at 08:46

Add Below class

import { NativeDateAdapter } from '@angular/material';

export class AppDateAdapter extends NativeDateAdapter {

  parse(value: any): Date | null {
    if ((typeof value === 'string') && (value.indexOf('/') > -1)) {
      const str = value.split('/');
      const year = Number(str[2]);
      const month = Number(str[1]) - 1;
      const date = Number(str[0]);
      return new Date(year, month, date);
    }
    const timestamp = typeof value === 'number' ? value : Date.parse(value);
    return isNaN(timestamp) ? null : new Date(timestamp);
  }
  format(date: Date, displayFormat: string): string {
    if (displayFormat == "input") {
      let day = date.getDate();
      let month = date.getMonth() + 1;
      let year = date.getFullYear();
      return this._to2digit(day) + '/' + this._to2digit(month) + '/' + year;
    } else if (displayFormat == "inputMonth") {
      let month = date.getMonth() + 1;
      let year = date.getFullYear();
      return this._to2digit(month) + '/' + year;
    } else {
      return date.toDateString();
    }
  }

  private _to2digit(n: number) {
    return ('00' + n).slice(-2);
  }
}

export const APP_DATE_FORMATS =
{
  parse: {
    dateInput: { month: 'short', year: 'numeric', day: 'numeric' }
  },
  display: {
    dateInput: 'input',
    monthYearLabel: 'inputMonth',
    dateA11yLabel: { year: 'numeric', month: 'long', day: 'numeric' },
    monthYearA11yLabel: { year: 'numeric', month: 'long' },
  }
}

In Module.ts file import it.

import { AppDateAdapter, APP_DATE_FORMATS } from './Models/app-date-adapter';
import { MatDialogModule, MatDatepickerModule, DateAdapter, MAT_DATE_FORMATS } from '@angular/material';

In providers section add as below:

providers: [MatDatepickerModule,
    {
        provide: DateAdapter, useClass: AppDateAdapter
    },
    {
        provide: MAT_DATE_FORMATS, useValue: APP_DATE_FORMATS
    }],

It can be solved your problem

ANGULAR format of selected date is not displaying correctly

1 Answers1