Home > Software engineering >  Using the ionic framework how can I add an input field above a picker
Using the ionic framework how can I add an input field above a picker

Time:01-20

I am using the Ionic 6 picker multicolumn with angular but also want it so that a user can type in a value. The picker I use has only numbers, 1 column for hh and 1 column for min.

How can I basically add input fields above the picker columns? So a user can type instead of scroll if they choose?

https://ionicframework.com/docs/api/picker

Thanks

CodePudding user response:

I don't think this is currently possible.
What you could do however is add the input field above the Button/Element that opens the picker like this

  <ion-input [(ngModel)]="pickerValue"></ion-input>
  <ion-button expand="block" (click)="openPicker()">Show Picker</ion-button>

or just build your own picker.

Also if you just want to use time there is this element

  <ion-input [(ngModel)]="this.hours" type="number" maxlength="2"></ion-input>
<ion-input [(ngModel)]="this.minutes" type="number" maxlength="2"></ion-input>
<ion-datetime [(ngModel)]="this.time" presentation="time"></ion-datetime>

you can put it in a custom component and open it using ModalContoller and just combine hours and minutes to the time on dismiss. Sadly you cant set the value of datetime just read it.

  • Related