Axure Tutorial: Automatically Get Date and Time from Text

Introduction

Getting the date and time is a requirement we may encounter in interface design. The function in action of Axure RP allows us to implement it quickly.

Features to be Realized

1. Obtain year, month, day, hour, minute, second, date and time.
2.Get real-time date and time.

Automatically Get Date and Time From Text

How to Realize these Features

1. Change the text when the label is loaded through the function.
2. Set the loop of switching the selection state every second to obtain the real-time date and time.

Preview the completed prototype for this tutorial

 

1. Widgets Setup 

Widgets Setup

1. Drag multiple labels into the canvas and name them year, month, date, hour, minute, second, Date & Time respectively.

2. Interaction Setup 

1.Get year

Get year

Select the Year label. When the label is LOADED set the This text to [[now. Getfullyear()]].

2.Get Month
Select the Month label. When the label is LOADED set the This text to [[Now.getMonth()]].

3.Get Date
Select the Date label. When the label is LOADED set the This text to [[Now.getDate()]].

4.Get Hour
Select the Hour label. When the label is LOADED set the This text to [[Now.getHours()]].

5.Get Minute
Select the Minute label. When the label is LOADED set the This text to [[Now.getMinutes()]].

6.Get Second
Select the Minute label. When the label is LOADED set the This text to [[Now.getSeconds()]].

7.Get Date & Time
Select the Date & Time label. When the label is LOADED set the This text to [[Now.getFullYear()]]-[[Now.getMonth()]]-[[Now.getDate()]] [[Now.getHours()]]:[[Now.getMinutes()]]:[[Now.getSeconds()]].

So how to get the real time date & time. Just toggle the selection state of this label every second. Then get the date & time when the selected or unselected state is triggered. 

In this way, all the settings are completed. If you have any questions and suggestions, please leave a message.

If you like the article, please share it with others with page link, thanks for your supporting! ❤

Note: Click here to download the completed RP file for this tutorial (RP 10 or up).


Well Joe @AxureBoutique, a technical writer and teacher, focuses on Axure prototype design and product design.


Leave a comment

Please note, comments must be approved before they are published

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.