Make ion-datetime open with a button

[zsantiago8712]

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)="picker.open()">
    <ion-datetime #picker pickerFormat="DD MMMM YYYY" [min]="datePickerMin" [(ngModel)]="datePicker" (ionChange)="changeDate()"></ion-datetime>
    <ion-icon name="calendar"></ion-icon>
  </button>

the error the solution give me:

#My HTML code

 <ion-fab horizontal="end" vertical="center">
            <ion-fab-button
              ion-fab
              color="primary"
              (click)="picker.open()"
              *ngIf="picker"
              (ionChange)="changeDate()"
            >
              <ion-icon name="calendar-outline" id="calendar-button"></ion-icon>
            </ion-fab-button>
          </ion-fab>

          <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;
}

[ciccilleju]

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

[zsantiago8712]

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

Thanks a lot!!

[whitewalker01]

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?

[ciccilleju]

yes with this:

[whitewalker01]

Thanks, much appreciated.