如何在Angular 7材质中添加两种日期选择器格式?

时间:2019-08-06 12:45:11

标签: angular

我在HTML表单中使用了两种类型的日期选择器。一个用于MM/YYYY,另一个用于DD/MM/YYYY

我的问题是组件提供者中的{ useValue: APP_DATE_FORMATS }正在将我的自定义MAT_DATE_FORMATS(自定义日期格式)应用于两个日期选择器。

export class AppDateAdapter extends NativeDateAdapter {

    format(date: Date, displayFormat: Object): string {
        if (displayFormat == "input") {
            //let day = date.getDate();
            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: 'MM/YYYY',
        },
        display: {
            dateInput: 'MM/YYYY',
            monthYearLabel: 'MMM YYYY',
            dateA11yLabel: 'LL',
            monthYearA11yLabel: 'MMMM YYYY',
        },
    }

    @Component({
        selector: 'app-search-certificate',
        templateUrl: './search-certificate.component.html',
        styleUrls: ['./search-certificate.component.css'],
        providers: [
            { provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE]},      
            { provide: MAT_DATE_FORMATS, useValue: APP_DATE_FORMATS }
        ]
    })
}

0 个答案:

没有答案