Have DateTime be opened by button?


#1

Hello.

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-datetime>
    <ion-icon name="calendar">
    </ion-icon>
</button>
</ion-fab>

#2

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