[TIMOB-16599] Android: showTimePickerDialog doesn't work

GitHub Issue	n/a
Type	Bug
Priority	Low
Status	Reopened
Resolution	Unresolved
Affected Version/s	Release 3.2.1
Fix Version/s	n/a
Components	Android
Labels	api, broken
Reporter	Lee Driscoll
Assignee	Unknown
Created	2014-03-06T14:36:16.000+0000
Updated	2018-02-28T20:03:19.000+0000

Description

So, the issue is that showTimePickerDialog does nothing when I call it and it throws no errors. showDatePickerDialog works as expected. And here's the code ->

<Alloy>
	<Window
        title="Add Job"
        exitOnClose="true"
        navBarHidden="true"
        layout="vertical"
        width="90%">
        <Picker
            id="locationField"
            hintText="LOCATION"
            borderStyle="Ti.UI.INPUT_BORDERSTYLE_LINE"
            color="#acacac"
            top="10"
            height="60"
            width="100%" />
        <TextField
            id="descriptionField"
            hintText="DESCRIPTION"
            borderStyle="Ti.UI.INPUT_BORDERSTYLE_LINE"
            color="#acacac"
            top="10"
            height="60"
            width="100%" />
        <TextField
            id="dateField"
            hintText="DATE"
            editable="false"
            borderStyle="Ti.UI.INPUT_BORDERSTYLE_LINE"
            color="#acacac"
            top="10"
            height="60"
            width="100%"
            onClick="openDatePicker" />
        <TextField
            id="startTimeField"
            hintText="START TIME"
            editable="false"
            borderStyle="Ti.UI.INPUT_BORDERSTYLE_LINE"
            color="#acacac"
            top="10"
            height="60"
            width="100%"
            onClick="openStartTimePicker" />
	</Window>
</Alloy>

var window = $.getView();

if (Ti.UI.Android){
	window.windowSoftInputMode = Ti.UI.Android.SOFT_INPUT_ADJUST_PAN;
}

var datePickerController = Alloy.createController('fields/datePickerDialog');
var startTimePickerController = Alloy.createController('fields/timePickerDialog');

function openDatePicker(e){
	datePickerController.showForTextField(e.source);
}

function openStartTimePicker(e){
	startTimePickerController.showForTextField(e.source);
}

<Alloy>
    <Picker type="Ti.UI.PICKER_TYPE_TIME" />
</Alloy>

var args = arguments[0] || null;

var timePicker = $.getView();

if(args){
	timePicker.applyProperties(args);
}

function showForTextField(textField, opts){

	opts = opts || {};

	opts.callback = function(e) {
		if(!e.cancel) {
			var timeValue = e.value;
			textField.value = timeValue.getHours() + ':' + timeValue.getMinutes();
			textField.blur();
		}
	};

	timePicker.showTimePickerDialog(opts);
}

exports.showForTextField = showForTextField;

<Alloy>
    <Picker type="Ti.UI.PICKER_TYPE_DATE" />
</Alloy>

var args = arguments[0] || null;

var datePicker = $.getView();

if(args){
	datePicker.applyProperties(args);
}

function showForTextField(textField, opts){

	opts = opts || {};

	opts.callback = function(e) {
		if(!e.cancel) {
			var dateValue = e.value;
			textField.value = dateValue.getDate() + '/'
				+ (dateValue.getMonth() + 1) + '/'
				+ dateValue.getFullYear();
			textField.blur();
		}
	};

	datePicker.showDatePickerDialog(opts);
}

exports.showForTextField = showForTextField;

Comments

Ritu Agrawal 2014-03-10

Moving this ticket to engineering as I can reproduce the issue with the following test case. Note that this appears to be a duplicate of TIMOB-7880 but I did not want to reopen such an old ticket.

   Ti.UI.backgroundColor = 'white';
   var win = Ti.UI.createWindow({
       exitOnClose: true,
       layout: 'vertical'
   });
    
   var picker = Ti.UI.createPicker({
       type: Ti.UI.PICKER_TYPE_TIME
   });
    
   win.open();
    
   function callbackFunction(e) 
   {
           if (e.cancel) {
               Ti.API.info('User canceled dialog');
           } else {
               Ti.API.info('User selected time: ' + e.value);
           }
   }
    
   picker.showTimePickerDialog({
       format24: true,
       title: "Current Time",
       callback: callbackFunction
   });

Biju pm 2014-03-13

   Ti.UI.backgroundColor = 'white';
   var win = Ti.UI.createWindow({
       exitOnClose: true,
       layout: 'vertical'
   });
    
   win.addEventListener("open",function(){
    
    
   var picker = Ti.UI.createPicker({
       type: Ti.UI.PICKER_TYPE_TIME
   });
      picker.showTimePickerDialog({
       format24: true,
       title: "Current Time",
        callback : callbackFunction
   });
    });
    
   win.open();  
   function callbackFunction(e) 
   {
           if (e.cancel) {
               alert('User canceled dialog');
           } else {
               alert('User selected time: ' + e.value);
           }
   }

Lee Driscoll 2014-03-13

What's the resolution here? The ticket's been closed but nothing's been done.
Biju pm 2014-03-13

for avoiding this bug .We can use the above TestCase. Reason of this bug is creation of activity . we can call showTimePickerDialog only after window opened
Lee Driscoll 2014-03-13

but the example you posted calls showTimePickerDialog BEFORE the window has opened.

Biju pm 2014-03-13

No. thats call inside the window open Listener

   win.addEventListener("open",function(){
     
     
   var picker = Ti.UI.createPicker({
       type: Ti.UI.PICKER_TYPE_TIME
   });
      picker.showTimePickerDialog({
       format24: true,
       title: "Current Time",
        callback : callbackFunction
   });
    });

Lee Driscoll 2014-03-13

My apologies, I was thrown by the indenting. Typical usage of this component would be to launch from a click on a text field. As per my original example, the window has been opened and the click event of the showTimePickerDialog fails to work. Whilst the code you posted fixes the example post by Ritu, I don't think it could be applied to my example as I'm already opening the window before calling showTimePickerDialog. Perhaps this is an Alloy specific bug.
Lee Driscoll 2014-03-13

Looking further at this, the simplified example posted by Ritu has very little to do with the bug I posted considering that it doesn't use the Alloy framework.

Cory Hughart 2015-10-13

This is still an issue. Why is this "low priority"? For those who land here searching for a workaround, I was able to get the time picker dialog to appear by creating it immediately before using it (in other words, not pre-creating it, then calling it later). This worked for me using SDK 5.0.2.GA.

   function openTimePicker() {
     Ti.API.info('Showing android time picker...');
     var timePicker = Ti.UI.createPicker({
       type: Ti.UI.PICKER_TYPE_TIME
     });
     timePicker.showTimePickerDialog({
       callback: function (e) {
         if (e.cancel) {
           Ti.API.info('Time picker cancelled');
           activeDateField.blur();
         }
         else {
           activeDateField.value = e.value;
           activeDateField.blur();
         }
       }
     });
   }

JSON Source