How to create Picker?

Ionic Framework ionic-v3
1

I’m trying to create a picker similar to DateTime but this picker only holds a range of number. I searched on how to use it but not able to find any.

setNumber() {
        let picker = Picker.create();
        for(let i = 0; i <= 10; i++){
            let column = {
                selectedIndex: this._number == i,
                options: [{
                    value: i,
                    text: i
                }]
            };
            picker.addColumn(column);
        }
        picker.addButton('Cancel');
        picker.addButton({
            text: 'Ok',
            handler: data => {
                this._number = data;
            }
        });
        this.navController.present(picker);
    }
1 Like
2

Got it. I mistook PickerColumn as the data itself :sweat:

    setNumber() {
        let picker = Picker.create();
        let options: PickerColumnOption[] = new Array<PickerColumnOption>();
        for (let i = 0; i <= 10; i++) {
            options.push({
                value: i,
                text: i.toString()
            })
        }
        let column = {
            selectedIndex: this._number,
            options: options
        };
        picker.addColumn(column);
        picker.addButton('Cancel');
        picker.addButton({
            text: 'Ok',
            handler: data => {
                this._number = data;
            }
        });
        this.navController.present(picker);
    }
1 Like
3

Hello, this is awesome!

Only issue I’m having is that it only returns the result of the right most column. Any idea how to get the rest of the columns?

Trying to do this:

` setNumber() {
let picker = Picker.create();
let optionsHours = [];
let optionMinutes = [];

for (let i = 0; i <= 24; i++) {
    optionsHours.push({
        value: i,
        text: i.toString()
    })
}

for (let i = 0; i <= 60; i++) {
    optionMinutes.push({
        value: i,
        text: i.toString()
    })
}

let columnHours = {
    selectedIndex: this._pickerHours,
    options: optionsHours
};

let columnMinutes = {
    selectedIndex: this._pickerMinutes,
    options: optionMinutes
};

// let MinutesText = {
//     options: ['Minutes']
// };


picker.addColumn(columnHours);
picker.addColumn(columnMinutes);
// picker.addColumn(MinutesText);
picker.addButton('Cancel');
picker.addButton({
    text: 'Ok',
    handler: data => {
        console.log(data);
    }
});


this.nav.present(picker);

}
`

4

Hello, I am trying to make a picker for countries list. But i don’t know how to use this picker in my html code.
Can you provide information how you are showing this ticker in you app?
Thanks in advance.