© 2002-2019 Axure Software Solutions, Inc. All rights reserved. Axure® is a registered trademark of Axure Software Solutions, Inc.
STEP 1: HIDE THE CALENDAR
In the training document, open the page named "Custom Datepicker". On the canvas is a widget group named "Custom Datepicker" that contains two other groups: the "Select Button" group will serve as the datepicker's button, and the "Calendar" group will serve as the calendar portion of the datepicker.
Select the "Calendar" group by clicking it twice on the canvas: one click to select the "Custom Datepicker" group and a second to select the "Calendar" group. (Alternatively, you can select the "Calendar" group directly in the Outline pane.) Then, hide the group by checking the "Hidden" checkbox in either the Style Toolbar or the Style tab of the Inspector.
STEP 5: PASTE THE ONCLICK CASE ONTO OTHER DAY RECTANGLES
STEP 6: PREVIEW
Preview the page in your web browser and click the select button to view the calendar. Then, click one of the days to set the text on the select button and hide the calendar again.
STEP 0: DOWNLOAD THE TRAINING FILE
If you don't already have it, download AxureTraining.rp and open it up in Axure RP. This file contains pages corresponding to each of the tutorials on the Axure training site. We recommend always completing the tutorials using our prepared file, but if you can't, that's okay too—we'll always tell you what to build in a new file in order to complete each tutorial without using AxureTraining.rp.
STEP 2: CREATE GLOBAL VARIABLES FOR THE MONTH AND YEAR
The "Day" widgets in the datepicker's "Calendar" group will need to use a month name and a year in their OnClick interactions. Let's create some global variables to hold those values. That way we can manage the month and year for all of the "Day" widgets from a single, central location.
STEP 3: TOGGLE VISIBILITY OF CALENDAR
Select the "Select Button" group and double-click "OnClick" in the Properties tab of the Inspector to give it a new OnClick case.
In the Case Editor, choose the action "Toggle Visibility" under "Show/Hide". Under "Configure actions", check the "Calendar" group.
At the bottom of the right column, select "slide down" in the "Animate Show" dropdown. Notice that "slide up" is automatically selected in the "Animate Hide" dropdown.
Click "OK" to close the Case Editor.
STEP 4: SET TEXT ON SELECT BUTTON AND HIDE CALENDAR WHEN A DAY IS CLICKED
In the Outline pane, select one of the "Day" rectangle widgets inside the "Calendar" group. This will temporarily show the group on the canvas. Locate the "1" rectangle at the top-right of the calendar and select it on the canvas. Then, double-click "OnClick" in the Properties tab of the Inspector to give it a new OnClick case.
In the Case Editor, choose the Set Text action. Under "Configure actions", check the rectangle widget in the "Select Button" group.
At the bottom of the right column, click the "fx" button to open the Edit Text dialog. Delete the text in the top field of the dialog, and then click "Insert Variable or Function". In the dropdown that appears, click "MonthVar" under "Global Variables". Notice that "[[MonthVar]]" appears in the text field.
Enter a space after "[[MonthVar]]" and then click "Insert Variable or Function" again. In the dropdown, click "text" under "Widget". "[[This.text]]" will appear in the text field. This value refers to the text on the clicked widget, in this case "1".
Enter a comma and a space after "[[This.text]]", and then click "Insert Variable or Function" one more time. In the dropdown, click "YearVar" under "Global Variables". The top field of the Edit Text dialog should now read "[[MonthVar]] [[This.text]], [[YearVar]]".
Click "OK" to close the Edit Text dialog.
Because the Set Text action in Step 4 references "This", which refers to the widget whose event is firing, we can use the exact same OnClick case for the other "Day" rectangles as well. Rather than setting the case up again for each of them, though, we can copy and paste it.
With the "1" rectangle widget still selected, right-click "Case 1" in the Properties tab of the Inspector and select "Copy" in the context menu. Then, right-click the "2" rectangle widget on the canvas and select "Paste". This will paste the copied case under that widget's OnClick event.
Paste this case onto the rest of the rectangle widgets from "3" to "31" as well so that they all have the same OnClick case.
In the Axure RP menu, go to "Project > Global Variables". If you're working in the AxureTraining.rp file, you should see the variables "MonthVar" and "YearVar" listed with the default values "July" and "2017" respectively. If you would like, you can change each of these values by double-clicking them.
If you aren't working in the AxureTraining.rp file, click the green "+" button twice to create two new global variables. Name one "MonthVar" and the other "YearVar", and give each a default value.
Click "OK" to close the Global Variables dialog.
Back in the left column of the Case Editor, choose the "Hide" action under "Show/Hide". Under "Configure actions", check the "Calendar" group.
At the bottom of the right column, select "slide up" in the "Animate" dropdown.
Click "OK" to close the Case Editor.
STEP 7 (OPTIONAL): CREATE MORE MONTHS
If you would like your simulated datepicker to include another month or two, place the "Day" rectangles inside a dynamic panel state. Then, duplicate that state to create another month's worth of days.
Add some navigation arrows to the "Calendar" group, and use them to set the state of your new dynamic panel. You'll also want to update the value of the "MonthVar" variable as you switch back and forth between the available months. That way the "Day" widgets in each state will have access to the correct month name in their OnClick Set Text actions.
Need help setting this up? Email us at email@example.com.
Note: For a simple, browser-styled datepicker, use a text field widget with the "Date" input type.