Search code examples
angularionic-frameworkionic6

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

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.