Learn how to prototype web and mobile apps

How to change the date format in your interactive prototypes

Change the date format in your interactive prototypes with the help of this tutorial.

Change date format in your UI prototypes

We’ve provided a very handy example below for when you need to format your date inputs, with the European format (dd/mm/yy). It uses the ‘substring’ function in the expressions builder to split the date (in the American format mm/dd/yy) into three texts, and then join them together in a different order (the European format: dd/mm/yy). You can apply the same idea to many other cases.

You can download an example here.

This example uses the ‘substring‘ function to split the selected date into ‘day’, ‘month’ and ‘year’. Then it joins them together in a different order.

Follow the next steps to reproduce the example.

1) In a new web prototype, drag a date input widget onto the canvas. Then, drag six Text widgets like in the example. We will use the Text widgets to store the selected ‘day’, ‘month’ and ‘year’ separately. 

2) Select the date input field and go to the Events tab. Click the ‘add event’ button and add an ‘On change’ + ‘Set value’ event. This event will be triggered when the user has selected a date, so the input holds the selected date.

3) Select the Text widget next to ‘month‘ and then click the calculator button in the input field ‘value is’. Build this expression:


This expression will return the piece of text that goes from the beginning of the selected date to the first slash. So if the selected date is 12/23/2012 this expressions returns ’12’.

4) Click OK tiwce. Now you’ve got the ‘month’ in a Text widget.

5) Let’s do the same for the ‘day’ and the ‘year’. In Events, click the gear icon next to the word ‘do’ and select ‘add action’. Add another ‘On change’ + ‘Set value’ event and select the Text widget that is next to ‘day‘.

6) Click the ‘calculated’ button in ‘value is’. Build this other expression:


This expression takes the piece of text from the selected date that goes from the first slash to the end of the text. So if the selected date was 12/23/2012 this expression returns 23/2012.We are a few steps away to get the selected day and year separately.

7) Click OK twice.

8) Click the gear icon next to ‘do’ and select ‘add action’. Add an ‘On change’ + ‘Set value’ event and select the text widget where we want to show the year.

9) Click on ‘calculated’ next to the ‘value is’ input field and build this expression:


This expression gives the piece of text that goes from the slash to the end of the text in the widget, therefore in our example it will return 2012, the selected year.

10) Click  OK twice and you will have the year in the year text widget.

Now let’s get the day.

11) Click the ‘add action’ and add another ‘On change’ + ‘Set value’ event, selecting the Text widget that will store the selected day.

12) Click the “calculated” button and build this expression:


This expression will get the piece of text that goes from the beginning of the text in the widget until the slash. Therefore, using this expression we’ll get the day number.

13) Click OK twice and so far you’ll have split the selected date in three Text widgets.

Now it’s time to re-build the date again in the format we want.

14) Add another action: ‘On change’ + ‘Set value’ event, this time selecting the input text field in the events dialog.

15) In ‘value is’, click the ‘calculated’ button and build this expression, adding the elements according to the order you want to show them: day/month/year.


And that’s all, you can click on Simulate and enjoy!

You have completed all of the Set value and calculations tutorials! Click here to continue learning about the Teamwork features