This is about ionic's ion-datetime-button

Adding the ionic-datetime-button to the html file No ionic-datetime instance found for ID 'datetime'. I encounter the error

No ion-datetime instance found for ID 'datetime'


The following files are ionic info,ts,html.

ionic info


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>


I have changed ionic to standalone and searched for issues but could not find a good answer

Continue reading...