Axure Common Interactive Instance Tutorial: Calendar Control Select Date

Last shared a axure commonly used interactive examples with text boxes and drag-and-drop tutorials, there are many sites have reproduced, the description of the content is still a bit of value. Share a common interaction instance in a Calendar control today: Select a date.

Instance Downloads: axure Common interactive Instance calendar controls. rar

1. Calendar control

First step:

Drag a two text panel and a rectangular box from the control library. In a Text panel control, enter the Select Date (label is named Text 1), and the other type a default date (labeled Text 2), and edit the text box control's properties as: a text box.

Step Two:

To open the Calendar control, you need to be aware that there is no calendar control in the General Control Library, you can download one online, I use a custom control that has been done before:

Step Three:

Combine the calendar controls that you just made into a single control, turn the right key into a dynamic panel, set the label: Calendar control, drag it to the bottom of the text box, and set it to hidden, as shown in the figure:

2. Adding events

First step:

Click Text Box 2, add onclick event, set the following figure:

Step Two:

Double-click the dynamic panel under Calendar controls, select 26 to add events, and set the following figure:

1 set the value of the text 2, that is, select 26 o'clock, the selected value is equal to text 2;

2 Select the need to hide the calendar control;

(Here the numbers casually choose, due to the limitations of axure itself, if you want to check the effect of a number of selected dates, follow this step more set several numbers)

Step Three:

Select 20, repeat the second step; (This option 26th and 14th can be passed to text 2)

When you set it up, click Save to create a Web page to see the effect. If you download the Calendar control has a full month, then you can directly switch the month of interaction with the date of the combination, so that the entire calendar interaction can be done, you can try ~ ~

Author: Leo

Article Source: 365ucd.com