Titanium.UI.Picker

Create a one-column, platform-specific style, picker and automatically select a row.

Ti.UI.backgroundColor = 'white';
var win = Ti.UI.createWindow({
  exitOnClose: true,
  layout: 'vertical'
});
 
var picker = Ti.UI.createPicker({
  top:50
});
 
var data = [];
data[0]=Ti.UI.createPickerRow({title:'Bananas'});
data[1]=Ti.UI.createPickerRow({title:'Strawberries'});
data[2]=Ti.UI.createPickerRow({title:'Mangos'});
data[3]=Ti.UI.createPickerRow({title:'Grapes'});
 
picker.add(data);
picker.selectionIndicator = true;
 
win.add(picker);
win.open();
 
// must be after picker has been displayed
picker.setSelectedRow(0, 2, false); // select Mangos

Create a two-column, platform-specific style, picker and automatically select a row in each column.

Ti.UI.backgroundColor = 'white';
var win = Ti.UI.createWindow({
  exitOnClose: true,
  layout: 'vertical'
});
 
var picker = Ti.UI.createPicker({
  top:50
});
picker.selectionIndicator = true;
 
var fruit = [ 'Bananas', 'Strawberries', 'Mangos', 'Grapes' ];
var color = [ 'red', 'green', 'blue', 'orange' ];
 
var column1 = Ti.UI.createPickerColumn();
 
for(var i=0, ilen=fruit.length; i<ilen; i++){
  var row = Ti.UI.createPickerRow({
    title: fruit[i]
  });
  column1.addRow(row);
}
 
var column2 = Ti.UI.createPickerColumn();
 
for(var i=0, ilen=color.length; i<ilen; i++){
  var row = Ti.UI.createPickerRow({ title: color[i] });
  column2.addRow(row);
}
 
picker.add([column1,column2]);
 
win.add(picker);
 
win.open();
 
// must be after picker has been displayed
picker.setSelectedRow(0, 2, false); // select Mangos
picker.setSelectedRow(1, 3, false); // select Orange

Create a date picker and handle the subsequent user action.

Ti.UI.backgroundColor = 'white';
var win = Ti.UI.createWindow({
  exitOnClose: true,
  layout: 'vertical'
});
 
var picker = Ti.UI.createPicker({
  type:Ti.UI.PICKER_TYPE_DATE,
  minDate:new Date(2009,0,1),
  maxDate:new Date(2014,11,31),
  value:new Date(2014,3,12),
  top:50
});
 
win.add(picker);
win.open();
 
picker.addEventListener('change',function(e){
  Ti.API.info("User selected date: " + e.value.toLocaleString());
});

Create a date picker that is automatically displayed as a modal dialog and handle the subsequent user action.

Ti.UI.backgroundColor = 'white';
var win = Ti.UI.createWindow({
  exitOnClose: true,
  layout: 'vertical'
});
 
var picker = Ti.UI.createPicker({
  type:Ti.UI.PICKER_TYPE_DATE,
  minDate:new Date(2009,0,1),
  maxDate:new Date(2014,11,31),
  value:new Date(2014,3,12)
});
 
win.open();
 
picker.showDatePickerDialog({
  value: new Date(2010,8,1),
  callback: function(e) {
    if (e.cancel) {
      Ti.API.info('User canceled dialog');
    } else {
      Ti.API.info('User selected date: ' + e.value);
    }
  }
});