这是关于 ionic 的 ion-datetime-button

Question

将 ionic-datetime-button 添加到 html 文件 未找到 ID 'datetime' 的 ionic-datetime 实例。我遇到错误

 No ion-datetime instance found for ID 'datetime'

以下文件是ionic info、ts、html。

离子信息

Ionic:

   Ionic CLI                     : 7.2.0 
   Ionic Framework               : @ionic/angular 8.0.1
   @angular-devkit/build-angular : 17.3.6
   @angular-devkit/schematics    : 17.3.6
   @angular/cli                  : 17.3.6
   @ionic/angular-toolkit        : 11.0.1

Capacitor:

   Capacitor CLI      : 6.0.0
   @capacitor/android : not installed
   @capacitor/core    : 6.0.0
   @capacitor/ios     : 6.0.0

ts

import {
  Component,
  OnInit,
  CUSTOM_ELEMENTS_SCHEMA,
} from '@angular/core';
import { ModalController } from '@ionic/angular';
import {
  ....
  IonDatetime,
  IonDatetimeButton,
  ...
} from '@ionic/angular/standalone';


@Component({
  selector: 'app-edit-schedule',
  templateUrl: './edit-schedule.component.html',
  styleUrls: ['./edit-schedule.component.scss'],
  providers: [ModalController],
  standalone: true,
  imports: [
    ...
    IonDatetime,
    IonDatetimeButton,
    ...
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class EditScheduleComponent implements OnInit {

  ngOnInit() {
  }

}

html

<div class="item-style date-style">
        <ion-label>Date</ion-label>
        <ion-datetime-button datetime="datetime"></ion-datetime-button>
        <ion-modal>
          <ng-template>
            <ion-datetime
              id="datetime"
              [value]="editEvent.firstDate"
            ></ion-datetime>
          </ng-template>
        </ion-modal>
      </div>

我已将 ionic 更改为独立并搜索问题，但找不到好的答案

Answer 1

使用日期时间按钮时，您需要始终在定义了 ion-datetime 组件的 ion-modal 或 ion-popover 上添加

keepContentsMounted

。您可以在 ion-datetime-button 组件的 ionic 文档中阅读更多相关内容。

<div class="item-style date-style">
  <ion-label>Date</ion-label>
  <ion-datetime-button datetime="datetime"></ion-datetime-button>
  <ion-modal [keepContentsMounted]="true">
    <ng-template>
      <ion-datetime
        id="datetime"
        [value]="editEvent.firstDate"
      ></ion-datetime>
    </ng-template>
  </ion-modal>
</div>