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>

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