Angular 8 中如何将 saturn-datepicker 日期格式设置为 yyyy-mm-dd

方法1：全局统一配置（全项目所有日期选择器生效） #

该方案一次配置，项目内所有saturn-datepicker默认都使用yyyy-mm-dd格式：

1. 首先确认已安装依赖适配器，如果未安装先执行安装：
   npm install @angular/material-moment-adapter moment
2. 在根模块（通常为app.module.ts）中导入依赖并自定义格式配置：

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

// 自定义yyyy-mm-dd格式规则
export const CUSTOM_DATE_FORMATS = {
  parse: {
    dateInput: 'YYYY-MM-DD',
  },
  display: {
    dateInput: 'YYYY-MM-DD',
    monthYearLabel: 'YYYY年MM月',
    dateA11yLabel: 'YYYY-MM-DD',
    monthYearA11yLabel: 'YYYY年MM月',
  },
};

3. 在根模块的providers数组中注入配置：

@NgModule({
  declarations: [
    // ... 你的组件声明
  ],
  imports: [
    // ... 其他导入模块，包括SaturnDatepickerModule
  ],
  providers: [
    { provide: DateAdapter, useClass: MomentDateAdapter },
    { provide: MAT_DATE_FORMATS, useValue: CUSTOM_DATE_FORMATS }
  ]
})
export class AppModule { }

方法2：单个组件独立配置（仅当前组件生效） #

如果不需要全局修改，只需要给某个页面的日期选择器设置格式，直接在对应组件的providers中注入上述配置即可，无需修改根模块：

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css'],
  // 单独注入格式配置
  providers: [
    { provide: DateAdapter, useClass: MomentDateAdapter },
    { provide: MAT_DATE_FORMATS, useValue: CUSTOM_DATE_FORMATS }
  ]
})
export class YourComponent {
  // 组件逻辑
}

注意事项 #

• 格式标识大小写敏感：YYYY代表4位年份，MM代表2位月份，DD代表2位日期，不要写成小写mm（小写为分钟标识，会导致格式错误）
• 如果配置后不生效，优先检查是否有其他全局provider覆盖了MAT_DATE_FORMATS配置
• saturn-datepicker基于Angular Material Datepicker封装，所有Angular Material日期选择器的格式配置规则都可通用

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