使用自定义管道更改 Datepicker (Angular) 中显示的日期格式答案

【问题标题】：Change format of date displayed in Datepicker (Angular) using custom pipe使用自定义管道更改 Datepicker (Angular) 中显示的日期格式
【发布时间】：2021-08-30 03:29:35
【问题描述】：

默认情况下，日期选择器使用 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>

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

我在调用管道时记录了值并且它是令人满意的但是为什么它没有显示在日期选择器中

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

这些是来自replaceDate1 管道的日志输出

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

【问题讨论】：

您不应该转换value 来格式化显示的日期格式。你读过documentation吗？
@YongShun 感谢您的输入，但我不想在那里使用 ngModel，有没有其他方法可以放置日期管道
@JSONDerulo 你能指出将日期管道放在 HTML 文件中的哪个位置以更改日期格式

标签： javascript angular typescript date datepicker

【解决方案1】：

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

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

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

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

【讨论】：