[TIMOB-7313] Android: Date Picker getValue throws an error, custom picker returns undefined

GitHub Issue	n/a
Type	Bug
Priority	High
Status	Closed
Resolution	Fixed
Resolution Date	2012-09-14T16:24:15.000+0000
Affected Version/s	Release 1.8.0.1, Release 2.0.0, Release 2.0.1
Fix Version/s	Sprint 2012-15 API, Release 2.1.3, Release 3.0.0
Components	Android
Labels	api, module_picker, parity, qe-testadded
Reporter	Radamantis Torres-Lechuga
Assignee	Josh Roesslein
Created	2012-01-20T11:08:42.000+0000
Updated	2014-06-20T14:22:30.000+0000

Description

Actual Behavior

The documentation about Pickers have a getValue method, as the getSelectedRow method, the customer try to reach the value at the Picker, and always throws an error: Object # has no method 'getValue'

Expected Behavior

getValue method returns the value selected on a Picker column, or, clarify the documentation about how to use the method

Code

I'm using the code on the kitchen sink "picker_android_spinner_date.js" adding a button to call the method

/*global Ti,Titanium,alert */
/*var w = Titanium.UI.createWindow({  
    title:'win1',
    backgroundColor:'#fff'
});
var status = Ti.UI.createLabel({
	top: 5, left: 5, right: 5, height: 40, textAlign:'center'
});
w.add(status);

function showStatus(s) {status.text = s;}

var names = ['Joanie', 'Mickey', 'Jean-Pierre', 'Gustav', 'Raul', 'Mimi', 'Emily', 'Sandra', 'Carrie', 'Chachi'];
var verbs = ['loves', 'likes', 'visits', 'loathes', 'waves to', 'babysits', 'accompanies', 'teaches', 'announces', 'supports', 'knows', 'high-fives'];

var rows1 = [];
for (var i = 0; i < names.length; i++) {
	rows1.push(Ti.UI.createPickerRow({title: names[i]}));
}

var rows2 = [];
for (i = 0; i < verbs.length; i++) {
	rows2.push(Ti.UI.createPickerRow({title: verbs[i]}));
}

var rows3 = [];
for (i = (names.length -1); i >=0; i--) {
	rows3.push(Ti.UI.createPickerRow({title: names[i]}));
}

var column1 = Ti.UI.createPickerColumn( {
	rows: rows1, font: {fontSize: "12"}
});
var column2 = Ti.UI.createPickerColumn( {
	rows: rows2, font: {fontSize: "12"}
});
var column3 = Ti.UI.createPickerColumn( {
	rows: rows3, font: {fontSize: "12"}
});

var picker = Ti.UI.createPicker({
	useSpinner: true, visibleItems: 7,
	type : Ti.UI.PICKER_TYPE_PLAIN,
	top: 150, height: 200,
	columns: [ column1, column2, column3 ]
});

picker.addEventListener('change', function(e) {
	showStatus(e.selectedValue[0] + " " + e.selectedValue[1] + " " + e.selectedValue[2]);
});

w.add(picker);


var btnCheckSelection = Ti.UI.createButton({
	left: 165, height: 40, top: 100, width: 150,
	title: 'Check sel.'
});
btnCheckSelection.addEventListener('click', function() {
	showStatus(picker.getSelectedRow(0).title + ' ' + picker.getSelectedRow(1).title + ' ' + picker.getSelectedRow(2).title);
	for (i in picker.getSelectedRow(0)){
		Ti.API.info('i--- '+i);
	}
	Ti.API.info('the value------ '+picker.getValue());
	var color = status.backgroundColor || w.backgroundColor || "black";
	status.backgroundColor = 'red';
	setTimeout(function(){status.backgroundColor=color;},1000);
});
w.add(btnCheckSelection);
w.open();*/




var win = Titanium.UI.createWindow({  
    title:'win1',
    backgroundColor:'#fff'
});

var minDate = new Date();
minDate.setFullYear(2009);
minDate.setMonth(0);
minDate.setDate(1);

var maxDate = new Date();
maxDate.setFullYear(2009);
maxDate.setMonth(11);
maxDate.setDate(31);

var value = new Date();
value.setFullYear(2009);
value.setMonth(0);
value.setDate(1);

var picker = Ti.UI.createPicker({
	useSpinner: true,
	type:Ti.UI.PICKER_TYPE_DATE,
	minDate:minDate,
	maxDate:maxDate,
	value:value
});

// turn on the selection indicator (off by default)
picker.selectionIndicator = true;

win.add(picker);

var label = Ti.UI.createLabel({
	text:'Choose a date',
	top:6,
	width:'auto',
	height:'auto',
	textAlign:'center',
	color:'white'
});
win.add(label);

picker.addEventListener('change',function(e)
{
	label.text = e.value;
});

var locale = false;
var localebutton = Ti.UI.createButton({
	title:'Change locale',
	bottom:20,
	width:200,
	height:40
});
localebutton.addEventListener('click', function() {
	if (!locale) {
		picker.setLocale('ru');
		locale = true;
	}
	else {
		locale = false;
		picker.setLocale(Titanium.Platform.locale);
	}
});
win.add(localebutton);

var button = Ti.UI.createButton({
	title:'Get Value',
	top:20,
	width:200,
	height:40
});
button.addEventListener('click', function(e){
	Ti.API.info('picker value-> '+picker.getValue());
});
win.add(button);
win.open();

Another approach

I try to use the method with another picker, using part of the kitchen sink "picker_android_spinner_text.js", the method always returns null or undefined

var w = Titanium.UI.createWindow({  
    title:'win1',
    backgroundColor:'#fff'
});
var status = Ti.UI.createLabel({
	top: 5, left: 5, right: 5, height: 40, textAlign:'center'
});
w.add(status);

function showStatus(s) {status.text = s;}

var names = ['Joanie', 'Mickey', 'Jean-Pierre', 'Gustav', 'Raul', 'Mimi', 'Emily', 'Sandra', 'Carrie', 'Chachi'];
var verbs = ['loves', 'likes', 'visits', 'loathes', 'waves to', 'babysits', 'accompanies', 'teaches', 'announces', 'supports', 'knows', 'high-fives'];

var rows1 = [];
for (var i = 0; i < names.length; i++) {
	rows1.push(Ti.UI.createPickerRow({title: names[i]}));
}

var rows2 = [];
for (i = 0; i < verbs.length; i++) {
	rows2.push(Ti.UI.createPickerRow({title: verbs[i]}));
}

var rows3 = [];
for (i = (names.length -1); i >=0; i--) {
	rows3.push(Ti.UI.createPickerRow({title: names[i]}));
}

var column1 = Ti.UI.createPickerColumn( {
	rows: rows1, font: {fontSize: "12"}
});
var column2 = Ti.UI.createPickerColumn( {
	rows: rows2, font: {fontSize: "12"}
});
var column3 = Ti.UI.createPickerColumn( {
	rows: rows3, font: {fontSize: "12"}
});

var picker = Ti.UI.createPicker({
	useSpinner: true, visibleItems: 7,
	type : Ti.UI.PICKER_TYPE_PLAIN,
	top: 150, height: 200,
	columns: [ column1, column2, column3 ]
});

picker.addEventListener('change', function(e) {
	showStatus(e.selectedValue[0] + " " + e.selectedValue[1] + " " + e.selectedValue[2]);
});

w.add(picker);


var btnCheckSelection = Ti.UI.createButton({
	left: 165, height: 40, top: 100, width: 150,
	title: 'Check sel.'
});
btnCheckSelection.addEventListener('click', function() {
	showStatus(picker.getSelectedRow(0).title + ' ' + picker.getSelectedRow(1).title + ' ' + picker.getSelectedRow(2).title);
	for (i in picker.getSelectedRow(0)){
		Ti.API.info('i--- '+i);
	}
	Ti.API.info('the value------ '+picker.getValue());
	var color = status.backgroundColor || w.backgroundColor || "black";
	status.backgroundColor = 'red';
	setTimeout(function(){status.backgroundColor=color;},1000);
});
w.add(btnCheckSelection);
w.open();

Attachments

File	Date	Size
pickerRow_issue.png	2012-01-20T11:08:42.000+0000	1175508

Comments

Ivan Skugor 2012-02-08

Here is simpler test case:

   var win = Ti.UI.createWindow({
       backgroundColor: '#000',
       layout: 'vertical',
       navBarHidden: true
   });
   
   var datePicker = Ti.UI.createPicker({
   	type: Ti.UI.PICKER_TYPE_DATE/*,
   	value: new Date()*/
   });
   
   /*datePicker.addEventListener('change', function(e) {
   	this.value = e.value;
   });
   
   datePicker.getValue = function() {
   	return this.value;
   };
   
   datePicker.setValue = function(value) {
   	this.value = value;
   };
   
   */
    
   var button = Ti.UI.createButton({
       title: 'Get value'
   });
   
   button.addEventListener('click', function(){
       Ti.API.info(datePicker.value);
       Ti.API.info(typeof datePicker.getValue);
       Ti.API.info(typeof datePicker.setValue);
   });
    
   win.add(datePicker);
   win.add(button);
   
   win.open();

Run this example, click "Get value", see console output, change date, click "Get value" again, see console output. This is huge problem because date picker's value cannot be retrieved in any way. A workaround is commented out. :)

Junaid Younus 2012-05-17

Tested with 2.0.1GA2 on a Samsung Galaxy S2, using Ivan's code. Issue still exists. iOS simulator has this issue as well.

Josh Roesslein 2012-07-12

Here is a revised test case that tests getting the "value" from both the picker and the "change" event:

   
   var win = Ti.UI.createWindow({
       backgroundColor: '#000',
       layout: 'vertical',
       navBarHidden: true
   });
    
   var datePicker = Ti.UI.createPicker({
       type: Ti.UI.PICKER_TYPE_DATE,
       useSpinner: false
   });
    
   datePicker.addEventListener('change', function(e) {
     Ti.API.info('change event: value = ' + e.value);
   });
    
   var button = Ti.UI.createButton({
       title: 'Get value'
   });
    
   button.addEventListener('click', function(){
       Ti.API.info(datePicker.value);
       Ti.API.info(datePicker.getValue());
   });
     
   win.add(datePicker);
   win.add(button);
    
   win.open();

1. Run application with picker useSpinner set to false. 2. Try changing the date with the picker. You should see the new date getting printed in the log. 3. Click "GetValue" and it should print the current date in the log. 4. Repeat 2 & 3 a few times to verify this keeps working. 5. Start at step 1 again, but this time change useSpinner to true.

Josh Roesslein 2012-07-12

Created [PR #2549](https://github.com/appcelerator/titanium_mobile/pull/2549) to resolve issue.
Shyam Bhadauria 2012-08-03

Environment used for verification - Tested with Titanium SDK: 2.2.0.v20120803000113 Tested with Titanium Studio: 2.1.1.201207271312 Device - Samsung Galaxy Nexus Android 4.0.2, android emulator 2.2 Machine OS - MAC 10.7.3
Shyam Bhadauria 2012-08-03

Re-opening to edit label
Shyam Bhadauria 2012-08-21

Occurs on: Titanium SDK: 2.1.2.v20120816171609 Titanium Studio: 2.1.2.201208192014 Device: Samsung GALAXY Note (2.3.6) Fixed with: SDK version: 2.2.0.v20120803000113
Vishal Duggal 2012-09-14

Reopening to add merge labels
Satyam Sekhri 2012-09-16

Verified on: Titanium Studio: 2.1.2.201208301612 Titanium SDK: 2.1.3.v20120915120319 Device: Samsung Note (v2.3.6), Samsung Galaxy Tab (v3.2)
jithinpv 2013-12-06

Anvil test case added. PR Link: https://github.com/appcelerator/titanium_mobile/pull/5078

JSON Source