使用自定义 pipe 更改 Datepicker (Angular) 中显示的日期格式

Question

默认情况下，日期选择器使用 MM/dd/yyyy 格式，我希望根据浏览器语言设置它，例如）如果是英语印度，那么它应该是 dd/MM/yyyy（在下面的示例中使用）

这是我的自定义日期管道->

@Pipe({ name: 'replaceDate1' })
export class ReplaceDate1Pipe implements PipeTransform {
    transform(value: string): string {
        if (!value) {
            return value;
        }

        let date1 = (new Date(value));
        var userLang = navigator.language;  
        console.log(value);
        console.log(date1);
        console.log(Intl.DateTimeFormat(userLang).format(date1));
        return Intl.DateTimeFormat(userLang).format(date1);
    }
}

这是 html 零件 ->

<mat-form-field [floatLabel]="never" appearance="fill" id="xxx" class="textbox1" panelClass="option-panel">
<mat-label>Choose a date</mat-label>
<input [min]="todayDate" [disabled]="fun1()" readonly matInput [matDatepicker]="picker" [value]="program.datetobeformatted | replaceDate1" [matDatepickerFilter]="myDateFilter" (dateChange)="onChange($event, 'xxx',  program, $index)">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>

在这里，我想更改 datepicker 日期中显示的日期值的格式，但该值在 UI 中显示为空字段

我在调用 pipe 时记录了这些值，这是令人满意的，但为什么它没有显示在日期选择器中

有没有办法从 HTML 文件中更改日期选择器格式（我只想相应地显示格式，而不是更改用于后端服务的日期格式的值）

这些是replaceDate1 pipe 的日志输出

2021-06-30T00:00:00Z
Wed Jun 30 2021 05:30:00 GMT+0530 (India Standard Time)
30/6/2021

Answer 1

您是否尝试过更改 Mat Date Picker 的语言环境？

{ provide: MAT_DATE_LOCALE, useValue: 'en-IN' }

将其添加到模块的提供程序部分

https://material.angular.io/components/datepicker/overview