CODEWITHSUNDEEP
angulardatepickerangular-materialmomentjs
TAS90
TAS90

Reputation: 41

How to change Angular Material Datepicker monthYearLabel format in run-time

I have followed this answer to the following question:

How to change Angular Material Datepicker format in run-time

This worked for changing the format of the date in run-time however it also changes the monthYearLabel format in the date picker as seen in the screenshot below:

MatDatePicker monthYeatLabel

Is there a way to change the monthYearLabel format in run-time so it is different to the date format? I would like it to keep the default format of MMM YYYY like below:

MatDatePicker Default

Upvotes: 4

Views: 2089

Answers (1)

Faliorn
Faliorn

Reputation: 1468

A bit late, but maybe this can help someone.

I've set a name to the "monthYear" format, and change it in run-time depending on the locale:

import { formatDate } from '@angular/common';
import { Injectable } from '@angular/core';
import { NativeDateAdapter } from '@angular/material/core';

export const PICK_FORMATS = {
    parse: { dateInput: { month: 'short', year: 'numeric', day: 'numeric' } },
    display: {
        dateInput: 'input',
        monthYearLabel: 'monthYear', //{ year: 'numeric', month: 'short' },
        dateA11yLabel: { year: 'numeric', month: 'long', day: 'numeric' },
        monthYearA11yLabel: { year: 'numeric', month: 'long' }
    }
};

@Injectable()
export class CustomDateAdapter extends NativeDateAdapter {

    constructor() {
        super(localStorage.getItem("locale") ?? "es-ES");
    }

    override format(date: Date, displayFormat: Object): string {
        if (displayFormat === 'input') {
            switch (this.locale) {
                case 'es-ES':
                    return formatDate(date, 'dd/MM/yyyy', this.locale);
                default:
                    return super.format(date, displayFormat);
            }
        } else if (displayFormat === 'monthYear') {
            switch (this.locale) {
                case 'es-ES':
                    return formatDate(date, 'MMM YYYY', this.locale);
                default:
                    return super.format(date, displayFormat);
            }
        } else {
            return super.format(date, displayFormat);
        }
    }

    override 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);
    }

    override getFirstDayOfWeek(): number {
        switch (this.locale) {
            case 'es-ES':
                return 1;
            default:
                return 0;
        }
    }
}

Probably not the best Angular / TS code ever, for I'm quite new to Angular.

Upvotes: 1

Related Questions