Using the ionic framework how can I add an input field above a picker

Issue

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

Solution

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.pickValue" presentation="time"></ion-datetime>

You can set the initial value with a ISO string.

this.pickValue = new Date(this.time).toISOString()

you can put it in a custom component and open it using ModalContoller and just combine hours and minutes to the time on dismiss.

Answered By – Greencoms

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0