ON THIS PAGE:
The Duration Picker component allows a user to select a duration from a drop-down list. This sets the a datetime variable linked to Start Date/Time, as well as a text variable linked to Duration.
In version 4.13, the available time periods in the Duration Picker have been expanded to include 3, 4, 5, 10 and 20 years.
In display mode, the Duration Picker displays a duration on the page, with a drop-down for selecting a different duration (such as 5 days, 1 week, 3 months, for example).
The Duration Picker Component
The Month Duration has two dates: Start Date/Time and End Date/Time, a Duration, and a Default Duration.
| Start Date/Time: | The time that the duration begins, defined as a variable that Duration Picker can both use and set. For example, if the Start/Date Time is midnight, the first duration of "12 hours" represents the period of time from midnight to midday.
This is preconfigured to use the page default variable, startTime. |
| End Date/Time: | The time that the duration period finishes. This is defined as a variable that the Duration Picker can use, but cannot set.
This is preconfigured to use the page default variable, endTime. |
| Duration: | The time range that is selected by the user. This is defined as a variable (duration) that the Duration Picker can use and set. |
| Default Duration: | The duration to display when the page is first loaded. Start Date/Time and End Date/Time must have a period between them exactly the same as Default Duration, in order for this to work. |
| Style: | The style you want to apply to the component. If you are a Style Administrator, you can create a new Duration Picker style. |
Tutorial: Duration Picker Using Default Values
If you're unfamiliar with the process of building pages, read the article Building an Explorer Page.
In this tutorial we'll build a new page from the Date Time Tutorials page. We'll add a Duration Picker component that uses the page default values for startTime and endTime.
We'll also add a text label to show the duration picker's Duration text.
Step 1. Prepare the Tutorial Page
Before you start the tutorial, prepare a new date/time tutorial page. If you have already created a "Date/Time Tutorials" page, then open this. Otherwise follow the instructions in Date Time Tutorials to add the page.
Step 2. Save as a New Tutorial Page
Save the page as "Date Time Tutorials - Duration Picker" in your private workspace, My Workspace.
1. Click the Save As.. 
button on the Studio toolbar.
2. In the dialog that appears, type in Date Time Tutorials - Duration Picker, and keep the default Workspace, My Workspace.
3. Click Save.
Step 3. Add a Duration Picker
1. Drag a Duration Picker component onto the top right of the Precision Layout, as shown. The Duration Picker is in the Time 
group.
2. Click on the Duration Picker component to review it
There is no need to change any of the properties. Note that Start Date/Time and End Date/Time are preconfigured to use the Page Defaults startTime and endTime, respectively.
Remember that these variables are also used in the text labels and tags in your tutorial page, so you'll be able to observe the two that use Start Date/Time change when you select a new duration from the duration picker.
Step 4. Add a Text Label
In this step we're going to add a text label to show duration, set by the Duration Picker's Duration property.
1. Drag a Text Label onto the top left of the page. In the text label's Content type Selected Duration is: then click Add Data and add the Duration Picker's Duration text variable, duration.
Try out the New Component
1. Click the Preview 
button on the Studio toolbar to see what your page will look like in run-time.
2. Select 3 months from the Duration Picker.
Note how the Start Time text label updates with the new startTime value, as well as the tag value using startTime. The "Selected Duration" text label also updates to show the selected duration.
