Question

I do the following

When I tap on text field, I show a picker, and I change the background image of the text field.

When the person is done with the picker (they click “done”), and I change the text field background back to white.

When I click on the text field again, the background image does not get changed even though the picker appears.

What can I do? I want it so that the text field keeps getting changed to a green background whenever I click on it and the picker shows up. And then changes back to white when I tap out of it and the picker disappears.

tf1.addEventListener('focus', function(e) {
    Titanium.API.info('Triggered focus on date txtField');

    tf1.setBackgroundImage('../images/selected.gif');

    Titanium.API.info(tf1.backgroundImage);

    var winDatePicker1 = Titanium.UI.currentWindow;

    var minDate = new Date();
    minDate.getFullYear();
    minDate.getMonth();
    minDate.getDate();

    var maxDate = new Date();
    maxDate.setFullYear(2018);
    maxDate.setMonth(9);
    maxDate.setDate(30);

    var datePicker = Ti.UI.createPicker({
        type : Ti.UI.PICKER_TYPE_DATE_AND_TIME,
        minDate : minDate,
        maxDate : maxDate,
        bottom : 0,
        minuteInterval : 10
    });

    var tview = Ti.UI.createView({
        height : '100%',
        width : '100%',
        top : 0,
        backgroundColor : 'transparent'
    });

    var done1 = Ti.UI.createImageView({
        title : '',
        width : 80,
        right : 12,
        height : 40,
        image : '../images/done.gif',
    });

    var toolbar1 = Ti.UI.createView({
        height : 43,
        backgroundImage : '../images/toolbar.gif',
    });

    toolbar1.add(done1);

    done1.addEventListener('click', function() {
        tf1.backgroundImage = '';
        toolbar1.hide();
        datePicker.hide();
        tview.hide();
    });

    tview.addEventListener('click', function() {
        toolbar1.hide();
        datePicker.hide();
        tview.hide();
    });

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

    datePicker.addEventListener('change', function(e) {

        Titanium.API.info('E value = ' + e.value);

        var pickerDate = e.value;

        var day = pickerDate.getDate();
        day = day.toString();

        if (day.length < 2) {
            day = '0' + day;
        }

        var month = pickerDate.getMonth();
        month = month + 1;
        month = month.toString();

        if (month.length < 2) {
            month = '0' + month;
        }

        var year = pickerDate.getFullYear();
        var hr = pickerDate.getHours();
        var min = pickerDate.getMinutes();

        if (hr < 10) {
            hr = '0' + hr;
        }

        if (min < 10) {
            min = '0' + min;
        }

        var datestr = '';

        if (hr >= 12) 
        {
            datestr += ' ' + (hr == 12 ? hr : hr - 12) + ':' + min + ' PM';
        } else {
            datestr += ' ' + hr + ':' + min + ' AM';
        }

        var newdate = month + "/" + day + "/" + year + datestr;

        Titanium.API.info('converted value = ' + newdate);

        tf1.setValue(newdate);

    });

    tview.add(datePicker);
    tview.add(toolbar1);

    winDatePicker1.add(tview);

    winDatePicker1.show({
        view : tf1,
        animated : true
    });

});

Answer 1

make setVisible(true) or setVisible(false)

show() and hide() will not give proper toggle at some conditions.