Contact form example

Can someone give me a simple example of a contact form page with a date picker for the iphone? 1 or 2 fields would be all I need.

I've been trying to get my mind around this for a few days and it's just not sinking in. Any help is appreciated.

the kitchen sink code shows how to display a picker. what you are missing is the event code.

1. create a text field
2. disable the text field
3. create a "click" event listener for the text field
4. on the click event of the text field, display the picker
5. on the picker "change" event, update the text field

That should get you rolling.

But how do I get the picker to close? Everything I try hides the WHOLE page.

Here's what I have. What I click the done button, the whole screen goes blank.

var win = Titanium.UI.currentWindow;
var scrollView = Titanium.UI.createScrollView({
    contentWidth: 'auto',
    contentHeight: 'auto',
    top: 0,
    bottom: 0,
    showVerticalScrollIndicator: true,
    showHorizontalScrollIndicator: true
});
 
win.add(scrollView);
 
var a = Titanium.UI.createAlertDialog({
    title:'Alert Test',
    message:'Hello World'
});
 
var contactUs = Titanium.UI.createLabel({
    color:'#999',
    text:"",
    top:10,
    left:10,
    width:300,
    font:{fontSize:15,fontFamily:'Helvetica Neue'},
    height:'auto'
});
 
var contactName = Titanium.UI.createLabel({
    color:'#fff',
    text:'Name',
    top:290,
    left:30,
    width:100,
    height:'auto'
});
 
var contactNameField = Titanium.UI.createTextField({
    hintText:'enter name',
    height:35,
    top:315,
    left:30,
    width:250,
    borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED
});
 
var emailName = Titanium.UI.createLabel({
    color:'#fff',
    text:'Email Address',
    top:355,
    left:30,
    width:200,
    height:'auto'
});
 
var emailField = Titanium.UI.createTextField({
    hintText:'enter email address',
    height:35,
    top:380,
    left:30,
    width:250,
    borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED
});
 
var phoneNumber = Titanium.UI.createLabel({
    color:'#fff',
    text:'Phone Number',
    top:420,
    left:30,
    width:200,
    height:'auto'
});
 
var phoneNumberField = Titanium.UI.createTextField({
    hintText:'enter phone number',
    height:35,
    top:445,
    left:30,
    width:250,
    borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED,
    keyboardType:Titanium.UI.KEYBOARD_PHONE_PAD,
    returnKeyType:Titanium.UI.RETURNKEY_DONE
});
 
var contactHow = Titanium.UI.createLabel({
    color:'#fff',
    text:'Best way to contact you',
    top:485,
    left:30,
    width:200,
    height:'auto'
});
 
var contactHowField = Titanium.UI.createTextField({
    hintText:"Best way to contact you",
    height:35,
    top:510,
    left:30,
    width:250,
    blur:true,
    borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED
});
 
var eventDate = Titanium.UI.createLabel({
    color:'#fff',
    text:'Date of Event',
    top:550,
    left:30,
    width:200,
    height:'auto'
});
 
var eventDateField = Titanium.UI.createTextField({
    hintText:"Date of Event",
    height:35,
    top:575,
    left:30,
    width:250,
    blur:true,
    borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED
});
 
var eventType = Titanium.UI.createLabel({
    color:'#fff',
    text:'Type of Event',
    top:615,
    left:30,
    width:200,
    height:'auto'
});
 
var eventTypeField = Titanium.UI.createTextField({
    hintText:"Type of Event",
    height:35,
    top:640,
    left:30,
    width:250,
    blur:true,
    borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED
});
 
var budgetAmount = Titanium.UI.createLabel({
    color:'#fff',
    text:'What is your budget',
    top:680,
    left:30,
    width:200,
    height:'auto'
});
 
var budgetAmountField = Titanium.UI.createTextField({
    hintText:"What is your budget",
    height:35,
    top:705,
    left:30,
    width:250,
    blur:true,
    borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED
});
 
eventDateField.addEventListener('focus',function(e){
    Titanium.API.info('Triggered focus on date txtField');
    eventDateField.blur();
 
        var winDatePicker = Titanium.UI.currentWindow;
        winDatePicker.backgroundColor = 'black';
 
    var minDate = new Date();
 
    var maxDate = new Date();
    maxDate.setFullYear(2020);
    maxDate.setMonth(11);
    maxDate.setDate(31);
 
        var value = new Date();
 
        var datePicker = Ti.UI.createPicker({
            type:Ti.UI.PICKER_TYPE_DATE,
            minDate:minDate,
            maxDate:maxDate,
            bottom:0,
            value:value
        });
 
        var doneBtn = Ti.UI.createButton({
          title: 'Done',
          style:Ti.UI.iPhone.SystemButton.SAVE
        });
 
        doneBtn.addEventListener('click',function(){
          winDatePicker.hide();
        });
 
        winDatePicker.rightNavButton = doneBtn;
 
        // 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 newdate = month + "-" + day + "-" + year;
 
        Titanium.API.info('converted value = '+newdate);
        eventDateField.setValue(newdate);
    });
 
        winDatePicker.add(datePicker);
    winDatePicker.show({ view: eventDateField,animated: true});
});
 
scrollView.add(contactUs);
scrollView.add(contactName);
scrollView.add(contactNameField);
scrollView.add(emailName);
scrollView.add(emailField);
scrollView.add(phoneNumber);
scrollView.add(phoneNumberField);
scrollView.add(contactHow);
scrollView.add(contactHowField);
scrollView.add(eventDate);
scrollView.add(eventDateField);
scrollView.add(eventType);
scrollView.add(eventTypeField);
scrollView.add(budgetAmount);
scrollView.add(budgetAmountField);

Please look in the KitchenSink app. In section ui/window is a godd example. In tools/picker are the date pickers.

Hope it helps

Rainer

I've looked at that but those are lacking in what I need. I need the picker to show up on textbox selection and then a done button. The examples just show the picker and not how to do these.