Fisrt I generated a component using the ionic cli: ionic g c datetime
Then generated a module for that component: ionic g module datetime
The module is just so I can reuse the component wherever I want by exporting the component in the module and importing it in the module of the page I wanna use it in.
datetime.component.html:
<ion-datetime>
<div slot="title">My Custom Title</div>
</ion-datetime>
datetime.module.ts:
@NgModule({
imports: [CommonModule],
declarations: [DatetimeComponent],
exports: [DatetimeComponent]
})
export class DatetimeModule { }
datetime.component.scss:
ion-datetime {
margin: auto;
}
This css is just to centralize the ion-datetime in the datetime component when using it as a custom component.
some-page.page.html:
<ion-content>
<ion-button color="success" (click)="openDatetimePopover($event)" expand="block" fill="solid">
<ion-label>PopoverController</ion-label>
</ion-button>
<ion-button color="success" id="trigger-button" expand="block" fill="solid">
<ion-label>Inline Popover</ion-label>
</ion-button>
<ion-popover trigger="trigger-button">
<ng-template>
<app-datetime></app-datetime>
</ng-template>
</ion-popover>
<h2>As a custom component</h2>
<app-datetime></app-datetime>
</ion-content>
Above is also the implementation of an inline popover containing an ion-datetime. Sometimes it works, sometimes it just doesn’t open and don’t throw any errors. I don’t know if that only happens with me or if is bug with ionic itself, if it is I’m sure they are gonna fix it when they release the stable version of Ionic 6
some-page.page.ts:
constructor(private popoverController: PopoverController) { }
async openDatetimePopover(event) {
const popover = await this.popoverController.create({
component: DatetimeComponent,
event,
cssClass: 'datetime-popover'
});
popover.present();
}
some-page.module.ts:
@NgModule({
imports: [
...
DatetimeModule,
]
global.scss:
.datetime-popover {
--width: 80vw;
--max-width: fit-content;
}
You can test to see if everything works for you, if it doesn’t just say what happens and we can see what else can we try.
