在Angular中如何将日期格式从dd/mm/yyyy转换为dd-mm-yyyy

需求参考图：

你当前使用的是Angular Material的日期输入组件，按照以下步骤修改即可：

前置依赖安装 #

如果还没有安装日期适配工具，先执行安装命令：
npm install moment @angular/material-moment-adapter

1. 组件TS文件导入相关依赖 #

在你的组件ts文件头部添加导入代码：

import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';
import { MomentDateAdapter } from '@angular/material-moment-adapter';
import * as moment from 'moment';

2. 自定义日期格式并注入配置 #

在组件@Component装饰器中新增提供者配置，同时定义自定义格式常量：

// 定义你需要的日期格式规则
export const CUSTOM_DATE_FORMATS = {
  parse: {
    dateInput: 'DD-MM-YYYY',
  },
  display: {
    dateInput: 'DD-MM-YYYY',
    monthYearLabel: 'MMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY',
  },
};

@Component({
  // 此处保留你原有的组件配置，比如selector、templateUrl、styleUrls等
  providers: [
    { provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] },
    { provide: MAT_DATE_FORMATS, useValue: CUSTOM_DATE_FORMATS },
  ],
})
export class YourComponent {
  // 原有组件逻辑
  dateFormat: boolean;

  validateDate() {
    const dateVal = this.memberForm.get('dateOfBirth').value;
    // 空值校验
    if (!dateVal) {
      this.dateFormat = true;
      return;
    }
    // 新增格式合法性校验
    this.dateFormat = !moment(dateVal, 'DD-MM-YYYY', true).isValid();
  }

  ngOnInit() {
    this.validateDate();
  }

  // 提交数据时获取格式化后日期的示例
  onSubmit() {
    if (this.memberForm.valid) {
      const finalDate = moment(this.memberForm.get('dateOfBirth').value).format('DD-MM-YYYY');
      // 此处添加你的表单提交逻辑
    }
  }
}

3. HTML代码调整（可选） #

原生type="date"输入框的显示格式会跟随浏览器系统语言变动，如果你需要强制所有环境都显示dd-mm-yyyy格式，可以把input的type改为text，不影响日期选择器的正常使用：

<div fxFlex="calc(25% - 30px)">
  <mat-form-field appearance="outline" class="w-100">
    <mat-label>Date of birth</mat-label>
    <input matInput type="text" [formControlName]="'dateOfBirth'" placeholder="Select entry date" required>
    <mat-error *ngIf="dateFormat">
      <strong>Kindly enter a valid date</strong>
    </mat-error>
  </mat-form-field>
</div>

内容的提问来源于stack exchange，提问作者Revanth Reddy