Have DateTime be opened by button?

Ionic Framework ionic-v3
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>
1 Like
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>
13 Likes
3

give me typescript code

4

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.

Typescript:

Isshowing : boolean=false;

showpicker()
{
if(Isshowing){
Isshowing =true
} else{
Isshowing =false
}
}
}

HTML:

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

5

Tks @arielf , simple and smart solution.

2 Likes
6

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

7

simple works for me thanks @arielf

8

Thanks @arielf . I just had to do @ViewChild('picker') picker: IonDatetime; in typescript with your solution.