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: stackoverflow.com/a/66540499/12113049

Eranki
– Eranki

2021-03-11 08:55:43 +00:00
Commented Mar 11, 2021 at 8:55 — Eranki
– Eranki, Commented Mar 11, 2021 at 8:55

Parth M. Dave · Accepted Answer · 2021-03-11 08:46:10Z

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

Collectives™ on Stack Overflow

ANGULAR format of selected date is not displaying correctly

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related