Have DateTime be opened by button?


I would like to have a button open a DateTime picker. However, the icon in the button is moved either to the right or left depending where I add the DateTime HTML.

Is there any way for the button to open the DateTime picker?

<ion-fab top right edge>
<button ion-fab mini>
    <ion-datetime displayFormat="MM/DD/YYYY" [(ngModel)]="myDate">
    <ion-icon name="calendar">
1 Like

Yes, I have recently done exactly what you are trying to do. You simply need to declare a template variable #picker and bind the button click event to picker.open()

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

give me typescript code

Other Wise u can declare boolean variable in type script.we can can the boolean variable state on button click , depending on the true or false we can hide the view.


Isshowing : boolean=false;

Isshowing =true
} else{
Isshowing =false


<ion-datetime *ngIf=“Isshowing” pickerFormat=“DD MMMM YYYY” [min]=“datePickerMin” [(ngModel)]=“datePicker” (ionChange)=“changeDate()”></ion-datetime>

<button ion-button icon-right (click)=“showpicker()”> lt;/button>

Tks @arielf , simple and smart solution.

1 Like

Exactly what I was looking for, Simple. Thanks @arielf