如何动态修改@danielmoncada/angular-datetime-picker的日期时间格式？

由于这个日期选择器的格式是通过Angular依赖注入（DI）机制提供的，我们可以通过动态更新DI配置，实现切换到月视图时自动修改显示格式的需求。

实现步骤 #

• 定义多套格式配置
  针对常规视图和月视图分别定义格式对象，匹配不同的显示需求：

  // 常规视图格式（如日视图）
  const DEFAULT_DATE_FORMATS = {
    parse: {
      dateInput: 'YYYY-MM-DD',
    },
    display: {
      dateInput: 'YYYY-MM-DD',
      monthYearLabel: 'YYYY年MM月',
      dateA11yLabel: 'LL',
      monthYearA11yLabel: 'YYYY年MM月',
    }
  };
  
  // 月视图专属格式
  const MONTH_VIEW_DATE_FORMATS = {
    parse: {
      dateInput: 'YYYY年MM月',
    },
    display: {
      dateInput: 'YYYY年MM月',
      monthYearLabel: 'YYYY年MM月',
      dateA11yLabel: 'LL',
      monthYearA11yLabel: 'YYYY年MM月',
    }
  };
  

• 动态切换格式配置
  在组件中监听视图切换事件，通过动态创建注入器更新格式配置，结合变更检测刷新视图：

  import { Component, Inject, Injector, ChangeDetectorRef } from '@angular/core';
  import { DATE_TIME_FORMATS, DateTimeFormats, OwlDateTimeView } from '@danielmoncada/angular-datetime-picker';
  
  @Component({
    selector: 'app-date-range-picker',
    templateUrl: './date-range-picker.component.html',
    providers: [{ provide: DATE_TIME_FORMATS, useValue: DEFAULT_DATE_FORMATS }]
  })
  export class DateRangePickerComponent {
    constructor(
      @Inject(DATE_TIME_FORMATS) private dateFormats: DateTimeFormats,
      private injector: Injector,
      private cdr: ChangeDetectorRef
    ) {}
  
    // 监听视图切换事件
    onViewChange(view: OwlDateTimeView) {
      // 判断当前是否为月视图
      const isMonthView = view === 'month';
      // 动态创建注入器，更新格式配置
      const updatedInjector = Injector.create({
        providers: [{ 
          provide: DATE_TIME_FORMATS, 
          useValue: isMonthView ? MONTH_VIEW_DATE_FORMATS : DEFAULT_DATE_FORMATS 
        }],
        parent: this.injector
      });
      // 刷新组件视图
      this.cdr.detectChanges();
    }
  }
  

• 模板绑定视图切换事件
  在模板中为日期选择器绑定viewChange事件，触发格式更新：

  <!-- 开始日期选择器 -->
  <input
    type="text"
    placeholder="开始日期"
    [owlDateTime]="startDt"
    [owlDateTimeTrigger]="startDt"
    (viewChange)="onViewChange($event)"
  />
  <owl-date-time #startDt></owl-date-time>
  
  <!-- 结束日期选择器 -->
  <input
    type="text"
    placeholder="结束日期"
    [owlDateTime]="endDt"
    [owlDateTimeTrigger]="endDt"
    (viewChange)="onViewChange($event)"
  />
  <owl-date-time #endDt></owl-date-time>
  

效果验证 #

切换到月视图时，日期输入框会自动显示为YYYY年MM月格式（如2024年05月）；切回其他视图时，恢复默认的YYYY-MM-DD格式（如2024-05-20）。

内容的提问来源于stack exchange，提问作者me-and-viy