Make ion-datetime open with a button

How I can do to make a button open an ion-datetime?
I have see 1 solution but for me I doesn’t work, just give an error.

I have Ionic version: 6.20.8

#The solution  
 <button ion-button icon-right (click)="">
    <ion-datetime #picker pickerFormat="DD MMMM YYYY" [min]="datePickerMin" [(ngModel)]="datePicker" (ionChange)="changeDate()"></ion-datetime>
    <ion-icon name="calendar"></ion-icon>

the error the solution give me:

#My HTML code

 <ion-fab horizontal="end" vertical="center">
              <ion-icon name="calendar-outline" id="calendar-button"></ion-icon>

          <ion-datetime #picker pickerFormat="HH:mm"></ion-datetime>

#My Typescript code

import { Component, OnInit, ViewChild } from '@angular/core';
import { ItemReorderEventDetail, IonDatetime } from '@ionic/angular';

export class DatesPage implements OnInit {
    @ViewChild("picker") picker: IonDatetime;

there are a lot of good examples in Ionic documentation

anyway you must encapsule it inside a ion-modal or a ion-popover and give to the trigger element the same id as your ion-datetime

1 Like

It worked but I need the popover keep interacting with main page(back ground).
Like this.

Thanks a lot!!

Hi there
I have a question not relevant to the subject,
I have been trying to override the ion-datetime theme in angular using scss, but I failed,
any idea how I can do that?

yes with this:

Thanks, much appreciated.