Titanium Studio – iOS date picker

I don’t know. Was it was my unfamiliarity with Titanium Studio, a javascript-based cross-platform mobile app development environment,

or the fact that I haven’t developed in javascript in over 2 years? Whatever it was, it took me more hours than I’d care to admit to figure out how to make what I thought would be a simple date picker that populates a text field with the selection. Here’s a shot of the finished product.

As you can see, nothing special. It’s a very familiar interface for iPhone users. Imagine my surprise when I found almost no documentation or tutorials to walk me through this process. Well, let me rectify that oversight.

Let’s start with the basic window constructor. Since this editor doesn’t appear to have a tag for inserting code, I’ll use a block-quote.

var win = Titanium.UI.currentWindow;

var picker_view = Titanium.UI.createView({

height:251,

bottom:-251

});

win.add(picker_view);

Notice the height and bottom properties. Setting the bottom value equal to the inverse of the height allows us to have the picker slide in from the bottom.

Next comes the selector buttons and toolbar.

//CREATE SELECTOR BUTTONS

var cancel =  Titanium.UI.createButton({

title:’Cancel’,

style:Titanium.UI.iPhone.SystemButtonStyle.BORDERED});

var done =  Titanium.UI.createButton({

title:’Done’,

style:Titanium.UI.iPhone.SystemButtonStyle.DONE});

var spacer =  Titanium.UI.createButton({

systemButton:Titanium.UI.iPhone.SystemButton.FLEXIBLE_SPACE});

var toolbar =  Titanium.UI.createToolbar({

top:0,

items:[cancel,spacer,done]});

After constructing the toolbar, we set the date picker values like this:

//Set initial value to today’s date.

var dateValue = new Date();

var minDate = new Date();

minDate.setFullYear(1900);

minDate.setMonth(0);

minDate.setDate(1);

//maxDate cannot be greater than today’s date.

var maxDate = dateValue;

var picker = Ti.UI.createPicker({

type:Ti.UI.PICKER_TYPE_DATE,

minDate:minDate,

maxDate:maxDate,

value:dateValue,

selectionIndicator:true // turn on the selection indicator (off by default)});

picker_view.add(picker);

picker_view.add(toolbar);

Since in this example, the date picker is used to assign a birthdate, I set maxDate equal to dateValue which grabs today’s date from the Date() object. I also set the minDate to 1900, but this is optional. And then I added the picker and toolbar to the view.

I added the animation variables

var slide_in =  Titanium.UI.createAnimation({bottom:0});

var slide_out =  Titanium.UI.createAnimation({bottom:-251});

Notice I set the slide_out bottom property to -251. This gives the appearance that the picker flys in from the bottom. Finally, I add the event listeners.

//CANCEL BUTTON

cancel.addEventListener(‘click’, function() {

picker_view.animate(slide_out);

});

//UPDATE VALUE IF CHANGED

datePicker.addEventListener(‘change’, function() {

textField.value = datePicker.value;});

//SET TEXTFIELD VALUE AND CLOSE PICKER

done.addEventListener(‘click’, function() {

textField.value = datePicker.value;

picker_view.animate(slide_out);

});

If the user presses Cancel, the picker flies out. If the picker value changes, update it. Once the user selects a date and presses Done, the value gets passed back to the assigned text field. One key point that took me a long time to figure out. A date picker’s return value is simply picker.value. This is different than a custom picker’s return value which is derived from picker.getSelectRow(0).propertyName (usually the title property).

I hope this helps someone else save a whole lot of time. If you find an error or typo, just post the correction here.

Happy Coding.