Picker component like ion-datetime picker

Ionic Framework ionic-v3
1

I am doing my first ionic 2 app and I am in need of something the aweson ionic time did already but it’s not accessable as i need it :confused:

So I was wondering if it would be posible to use the scroll wheel picker as a stand alone picker (date irrelevant) … For example i have a list of names and I want the user to scroll and get this exact 3d filling as in the datetime-picker It is a pity such an amazing scroll to only exist in a modal.

2 Likes
2

I am wondering this too. I can’t fin any information about a regular picker component that you can use to select names, places, etc. Can anyone help?!

3

FYI there is a Picker component. The docs don’t show how to implement it at the moment, just what you can do with it. The Picker.create() stuff is out of date too. As of beta 11 it seems you have to import PickerController instead of Picker. It works like an Alert - picker.present(picker)…

4

Yes I know and since Ionic is still in Beta I don’t expect the documentation to be 100% done
And also using an alert dialog thingy for the picker would not work for me unfortunately :confused:

So I guess I’ll have to wait and use a simple scroll list until then :slight_smile:

5

Oh so I didn’t mean using some weird alert hack. I meant they changed it so it works more like an alert.

Here: this typescript is all you need to display a picker. From there you can add your methods etc. This works in beta 11. Just add this as a view and you should see a picker.

import {PickerController} from ‘ionic-angular’;

@Component({
template: ‘your-selector’ //you’ll need to change this
})

export class pickerExample {
items:Array = [
‘Nodal bradycardia’,
‘1st degree heart block’,
‘2nd degree heart block’,
‘Undifferentiated narrow complex bradycardia’,
‘3rd degree heart block’,
‘Undifferentiated broad complex bradycardia’
]

constructor(private picker:PickerController) {
this.createPicker();
}

createPicker():void {
let picker = this.picker.create({
buttons: [
{
text: ‘accept’
}
]
});
let column = {
columnWidth: ‘100%’,
options: this.items
}

picker.addColumn(column);
picker.present(picker);

}
}