如何在Ionic 7的日历导航旁添加'Today'按钮？插槽或其他方案

一、推荐：使用官方插槽（更稳定） #

Ionic 7的ion-datetime提供了header插槽，允许你完全自定义头部导航区域，包括添加自定义按钮。这种方式不依赖组件内部的DOM结构，兼容性和稳定性更好，是官方推荐的自定义方式。

实现代码 #

HTML部分

<ion-datetime 
  ngClass="w-100" 
  presentation="date"
  [value]="highlightedDates[2].date" 
  [multiple]="true" 
  [highlightedDates]="highlightedDates"
>
  <!-- 自定义头部插槽 -->
  <ng-template slot="header">
    <ion-toolbar>
      <ion-buttons slot="start">
        <ion-button (click)="navigateCalendar('prev')">
          <ion-icon name="chevron-back"></ion-icon>
        </ion-button>
      </ion-buttons>
      <ion-title>{{ currentMonthYear }}</ion-title>
      <ion-buttons slot="end">
        <ion-button (click)="setToday()">Today</ion-button>
        <ion-button (click)="navigateCalendar('next')">
          <ion-icon name="chevron-forward"></ion-icon>
        </ion-button>
      </ion-buttons>
    </ion-toolbar>
  </ng-template>
</ion-datetime>

TS部分

import { Component, ViewChild } from '@angular/core';
import { DateTime } from '@ionic/angular';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.scss'],
})
export class YourComponent {
  highlightedDates = [
    {
      date: '2024-04-06',
      textColor: 'var(--ion-color-blue-secondary-contrast)',
      backgroundColor: 'var(--ion-color-blue-secondary)',
    },
    {
      date: '2024-04-09',
      textColor: 'var(--ion-color-blue-secondary-contrast)',
      backgroundColor: 'var(--ion-color-blue-secondary)',
    },
    {
      date: '2024-04-15',
      textColor: 'var(--ion-color-blue-secondary-contrast)',
      backgroundColor: 'var(--ion-color-blue-secondary)',
    }
  ];
  currentMonthYear: string;
  @ViewChild(DateTime) datetime!: DateTime;

  constructor() {
    this.updateCurrentMonthYear(new Date());
  }

  // 更新头部显示的年月文本
  updateCurrentMonthYear(date: Date) {
    this.currentMonthYear = new Intl.DateTimeFormat('en-US', { 
      year: 'numeric', 
      month: 'long' 
    }).format(date);
  }

  // 切换月份（上一页/下一页）
  navigateCalendar(direction: 'prev' | 'next') {
    this.datetime[direction === 'prev' ? 'previous' : 'next']();
    this.updateCurrentMonthYear(this.datetime.valueAsDate || new Date());
  }

  // 快速切换到今天
  setToday() {
    const today = new Date();
    this.datetime.value = today.toISOString().split('T')[0];
    this.updateCurrentMonthYear(today);
  }
}

二、改进Shadow DOM操作方式（备选） #

如果你坚持要通过操作组件内部的Shadow DOM实现，需要修正现有代码的几个问题：

1. HTML中模板引用变量的拼写错误（原calander改为calendar）
2. 创建按钮后需将其添加到目标DOM节点
3. 给按钮绑定点击事件实现“回到今天”的功能

修正后的代码 #

HTML部分

<div #calendar>
  <ion-datetime 
    ngClass="w-100" 
    presentation="date"
    [value]="highlightedDates[2].date" 
    [multiple]="true" 
    [highlightedDates]="highlightedDates"
  ></ion-datetime>
</div>

TS部分

import { Component, ElementRef, Renderer2, ViewChild } from '@angular/core';
import { DateTime } from '@ionic/angular';
import { timer } from 'rxjs';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.scss'],
})
export class YourComponent {
  @ViewChild('calendar', { read: ElementRef, static: false }) calendar?: ElementRef;
  @ViewChild(DateTime) datetime!: DateTime;

  highlightedDates = [
    {
      date: '2024-04-06',
      textColor: 'var(--ion-color-blue-secondary-contrast)',
      backgroundColor: 'var(--ion-color-blue-secondary)',
    },
    {
      date: '2024-04-09',
      textColor: 'var(--ion-color-blue-secondary-contrast)',
      backgroundColor: 'var(--ion-color-blue-secondary)',
    },
    {
      date: '2024-04-15',
      textColor: 'var(--ion-color-blue-secondary-contrast)',
      backgroundColor: 'var(--ion-color-blue-secondary)',
    }
  ];

  constructor(private renderer: Renderer2) {}

  ngAfterViewInit(): void {
    timer(300).subscribe(() => {
      // 获取ion-datetime元素
      const datetimeEl = this.calendar?.nativeElement.querySelector('ion-datetime');
      if (!datetimeEl) return;

      const shadow = datetimeEl.shadowRoot;
      const calendarActionButtons = shadow?.querySelector('.calendar-action-buttons');
      if (!calendarActionButtons) return;

      // 创建Today按钮
      const todayButton = this.renderer.createElement('ion-button');
      this.renderer.setProperty(todayButton, 'innerText', 'Today');
      this.renderer.setStyle(todayButton, 'color', 'blue');
      // 绑定点击事件
      this.renderer.listen(todayButton, 'click', () => {
        const today = new Date();
        this.datetime.value = today.toISOString().split('T')[0];
      });

      // 将按钮插入到导航按钮容器中
      this.renderer.appendChild(calendarActionButtons, todayButton);
    });
  }
}

注意事项 #

• Shadow DOM操作依赖Ionic组件的内部类名（如.calendar-action-buttons），后续Ionic版本更新可能会修改这些类名，导致代码失效，因此优先推荐插槽方式。
• 可以替换固定延迟timer(300)为ionDatetimeDidLoad事件，确保组件完全加载后再操作DOM：

  <ion-datetime (ionDatetimeDidLoad)="onDatetimeLoad()"></ion-datetime>
  

  然后在TS中移除timer，直接在onDatetimeLoad方法中执行Shadow DOM操作。

内容的提问来源于stack exchange，提问作者José Ferreira