Titanium 6.0.3 GA - Date & Time pickers problems

Question

I'm building an app and I have problems with date and time pickers. I want to autocomplete 2 textfields with the date and the time selected.

My first problem is : when I click on the textfield for the date, it's selected, but I need to click another time to launch the datePicker.

And the second problem is with the timePicker : on click on the textField (also 2 times), the picker appears under my window. When I close this window, my timePicker is here ... but not at the good place ! So, I can't select the time.

Here's my code :

var date_container = Ti.UI.createView({ layout:'horizontal', top:0, width:textfields_width, height:Ti.UI.SIZE });

var datePicker = Ti.UI.createPicker({ type: Ti.UI.PICKER_TYPE_DATE });
var flight_date = Ti.UI.createTextField({
    editable: false,
    width:textfields_width/2,
    height: textfields_height,
    hintText:"Date",
    top:textfields_top+35
});

date.addEventListener('click', function(e) {
    datePicker.showDatePickerDialog({
        value : new Date(), // some date
        maxDate : new Date(),
        callback : function(e) {
            if (e.value) {
                date.value = String.formatDate(e.value, 'medium');
                day_timestamp.value = e.value.getTime();
            }
        }
    });
});
date_container.add(date);



var timePicker = Ti.UI.createPicker({ type: Ti.UI.PICKER_TYPE_TIME });
var time = Ti.UI.createTextField({
    editable: false,
    width:textfields_width/2,
    height: textfields_height,
    hintText:"Heure",
    top:textfields_top+35
});

time.addEventListener('click', function(e) {
    timePicker.showTimePickerDialog({
        format24: true,
        callback : function(e) {
            if (e.value) {
                time.value = String.formatTime(e.value, 'medium');
                hour_timestamp.value = e.value.getTime();
            }
        }
    });
});
date_container.add(time);
main_container.add(date_container);

Could you help me ? Thanks :)

Answer 1

First problem - Add the methods for showing the pickers also on 'focus' event. They are triggered before 'click' when you tap on the text fields the first time. Once you have focus then 'click' will be triggered (and only that since you are not changing the focus). That may cause a problem if one the text fields is automatically focused when the window loads, but you can simply add a boolean flag to take care of the initial focus.

Second problem - Workaround for showing the time picker on the right place is to add it to the window manually before calling 'showTimePickerDialog'. Just make sure it does not show on the screen.

var textfields_width = 300;
var textfields_height = 80;
var textfields_top = 80;

// Boolean flag in case you want to prevent
// any of the pickers to show immediately
var initialLoad = true;

var main_container = Titanium.UI.createWindow({});

var date_container = Ti.UI.createView({
    layout:'horizontal',
    top:0,
    width:textfields_width,
    height:Ti.UI.SIZE
});

var datePicker = Ti.UI.createPicker({
    type: Ti.UI.PICKER_TYPE_DATE
});

var date = Ti.UI.createTextField({
    editable: false,
    width:textfields_width/2,
    height: textfields_height,
    hintText:"Date",
    top:textfields_top+35
});

var timePicker = Ti.UI.createPicker({
 type: Ti.UI.PICKER_TYPE_TIME,
 //make sure the time picker is not showing when you add it
 top: -1000,
 left: -1000
  });

var time = Ti.UI.createTextField({
    editable: false,
    width:textfields_width/2,
    height: textfields_height,
    hintText:"Heure",
    top:textfields_top+35
});

//add the time picker to the main container
main_container.add(timePicker);
date_container.add(date);
date_container.add(time);
main_container.add(date_container);

main_container.open();

datePickerListener = function(e) {
    //guarding if the focus is on the textfield
    if (!initialLoad) {
        datePicker.showDatePickerDialog({
        value : new Date(), // some date
        maxDate : new Date(),
        callback : function(e) {
            if (e.value) {
                date.value = String.formatDate(e.value, 'medium');
                }
            }
        });
    }
    initialLoad = false;
}

timePikcerListener = function(e) {
    timePicker.showTimePickerDialog({
        format24: true,
        callback : function(e) {
            if (e.value) {
                time.value = String.formatTime(e.value, 'medium');
            }
        }
    });
}

date.addEventListener('focus', datePickerListener);
date.addEventListener('click', datePickerListener);
time.addEventListener('focus', timePikcerListener);
time.addEventListener('click', timePikcerListener);