Question

Im a Titanium Beginner who is trying to create a form page with 2 textfields of Name and address and a DateTimePicker. I am facing 2 problems right now being :

1) the DateTimePicker is successfully shown but i would like both of it and also including the 2 textfields to be on the same window, with a same submit button.

2) I have tried numerous times but am unable to create a simple textfield at all even just creating it on a single page.It just doesnt show up.
Anyone could offer some constructive help?

Thanks in advance. The Below is my current code.

var winTimePicker = Titanium.UI.createWindow({});
winTimePicker.backgroundColor = ‘black’;

var doneBtn = Ti.UI.createButton({
    title: 'Done',
});

doneBtn.addEventListener('click', function() {
    winTimePicker.hide();
});

winTimePicker.add(doneBtn);

var timePicker = Ti.UI.createPicker({
    type:Ti.UI.PICKER_TYPE_TIME,
    bottom:0,
});


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

timePicker.addEventListener('change', function(e) {
    //your code
});

winTimePicker.add(timePicker);


//open window
winTimePicker.open();   

var winDatePicker = Titanium.UI.createWindow({});
winDatePicker.backgroundColor = ‘black’;

var doneBtn = Ti.UI.createButton({
    title: 'Done',
});

doneBtn.addEventListener('click', function() {
    winDatePicker.hide();
});

winDatePicker.add(doneBtn);

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


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

datePicker.addEventListener('change', function(e) {
    //your code
});

winDatePicker.add(datePicker);


//open window
winDatePicker.open();   

var textField = Titanium.UI.createTextField({
color:’#336699′,
width:”auto”,
height:”auto”,
borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED,
});

var textField2 = Titanium.UI.createTextField({
color:’#336699′,
width:”auto”,
height:”auto”,
borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED,
});

Answer 1

Check this code out and make changes as you find suitable to it:

var timePickerWin = Ti.UI.createWindow({
            navBarHidden : true,
            backgroundColor : '#fff'
        });

var startTime = Ti.UI.createPicker({
        top : '15dp',
        left : '50dp',
        useSpinner : false,
        selectionIndicator : true,
        type : Ti.UI.PICKER_TYPE_TIME,
        format24 : false,
        height : '130dp',
        //  width:'auto'

    });


 var endTime = Ti.UI.createPicker({
            top : '15dp',
            left : '50dp',
            useSpinner : false,
            selectionIndicator : true,
            type : Ti.UI.PICKER_TYPE_TIME,
            format24 : false,
            height : '130dp'
        });

var nextButton = Ti.UI.createButton({
            width : '220dp',
            height : '45dp',
            top : '15dp',
            title : 'Next',
            backgroundColor : '#294079',
            font : {
                fontSize : '18dp',
                fontWeight : 'bold'
            },
            color : '#fff'
        });

startTime.addEventListener('change', function(e) {
        //alert("User selected date: " + e.value);
        startPickerValue = e.value;
    });

    endTime.addEventListener('change', function(e) {
        //alert("User selected date: " + e.value);
        endPickerValue = e.value
    });
var fullNameTextBox = Ti.UI.createTextField({
        borderStyle : Titanium.UI.INPUT_BORDERSTYLE_ROUNDED,
        width : '275dp',
        height : '45dp',
        //value : '',
        top : '15dp',
        color : '#000000',
        hintText : 'Enter full name'
        //  backGroundColor:'gray',

    });
    var emailTextBox = Ti.UI.createTextField({
        borderStyle : Titanium.UI.INPUT_BORDERSTYLE_ROUNDED,
        width : '275dp',
        height : '45dp',
        //value : '',
        top : '15dp',
        color : '#000000',
        hintText : 'Enter email'

    });

Finally add all these UI elements to the window which is the timePickerWin using add function

timePickerWin.add(startTime);

and so on for all the UI elements.After that open the timePickerWin as below

timePickerWin.open()

Make suitable layout changes by varying the left,right,height and width properties of each element.