时间戳

首页 > 解决方案 > Angular Material 自定义日期选择器格式抛出错误“format.replace 不是函数”

angular6 - Angular Material 自定义日期选择器格式抛出错误“format.replace 不是函数”

问题描述

我正在将日期自定义为 dd-mmm-yyy 即例如 2019 年 2 月 12 日，使用角材料 6 工作，这是我的代码，我没有使用替换功能，但仍然收到此错误

组件文件内容

 import { MomentDateAdapter ,MatMomentDateModule } from '@angular/material-moment-adapter';
    import {DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE} from '@angular/material/core';
    import {MatDatepicker} from '@angular/material/datepicker';
    import {default as _rollupMoment, Moment} from 'moment';
    import * as _moment from 'moment';
export class MyDateAdapter extends NativeDateAdapter {
    // constructor() {
    //  super('en-US');
    // }

    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(day) + '/' + this._to2digit(month) + '/' + year;
        } else {
            return date.toDateString();
        }
    }

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


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

和 HTML 部分

<div class="col-lg-4 m-form__group-sub">
                                            <mat-form-field class="example-full-width" appearance="outline">
                                                <mat-label>Invoice Date</mat-label>
                                                <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="picker1" placeholder="Choose a date" formControlName="inv_date">
                                                <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
                                                <mat-datepicker #picker1></mat-datepicker>
                                            </mat-form-field>
                                        </div>

标签： angular6date-formatangular-material-6

解决方案

要具有 UTC 材料日期选择器行为和特定日期格式：

  1. 安装@angular/material-moment-adapter并确保moment也安装了 lib。
  2. 导入MatMomentDateModule.
  3. 添加{ provide: MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: { useUtc: true }}到模块的提供者数组。
  4. 可选的。要覆盖日期选择器中的显示值，请使用以下方法设置语言环境：{ provide: MAT_DATE_LOCALE, useValue: 'en-GB' }为材料日期选择器提供全局 dd/M/yyyy 格式

从现在开始，材料日期选择器将使用 UTC。datepicker 的输出也将是 UTC，无需调整时区。

对于非常高级的情况，请使用自定义 DateAdapter 实现和 DateFormats 而不是上面的所有内容。{provide: DateAdapter, useClass: MyDateAdapter}, {provide: MAT_DATE_FORMATS, useValue: MY_DATE_FORMATS}

有关其他信息，请查看材料 API 文档

推荐阅读