Simulating a DatePicker in Indigo Studio

Ambrose Little / Wednesday, March 13, 2013

Simple Date Picker Simulation

Although we had a date picker in an early alpha of Indigo, it had to be cut for V1 release. We do know it is a common/useful control, so it will make its way back into the toolbox. To expedite that, you can vote for it here.

In the meantime, it's not hard to simulate picking from a date picker with Indigo. The "Rove" sample that ships with Indigo illustrates one way to do this, but you can also do a simple simulation using a Textbox, Icon (the Calendar one), an image of your favorite date picker (like the Infragistics Ignite UI date picker), and a couple simple interactions.

1. Add a Textbox and Icon, picking the Calendar icon from the available icons. Position them together. You can increase the size of the Textbox by changing its font size if you want.

2. Add a Taps/Clicks interaction to the icon (you can rename it to Date Picker if you want the state auto named Tapped/Clicked Date Picker).

3. Drop in your favorite date picker calendar image and position it below the text box (shown above).

4. Add a Taps/Clicks interaction to the calendar image.

5. Type in the date you want to simulate picking into the Textbox.

That's it. You can optionally, fade in/out the calendar by just resizing the Add and Remove on the timeline. You can see all of this in action and also download the sample screen to poke around with it in Indigo.

Of course, having a "real" date picker will be nifty and nice, but for the purposes of sketching prototypes, maybe this technique will help you.


About Indigo Studio for Interaction Prototyping

Don't have Indigo Studio? Download a free 30-day trial which will let you try all of the prototyping goodness.

Download Indigo Studio

Looking to suggest improvements and new ideas for Indigo Studio?

Submit a new idea

If for some reason you are having trouble with Indigo Studio, check out our help topics, forums or contact support.

Get Support

Follow us on Twitter @indigodesigned


About the Author

Ambrose Little is principal design technologist at Infragistics and has worked on Indigo Studio as interaction designer and product manager along with an awesome team based here in Cranbury, NJ, USA and Montevideo, Uruguay.