ON THIS PAGE:
Overview
The Month Picker component allows a user to select a month and year from a drop-down list. This sets the two datetime variables linked to Start Date/Time and End Date/Time, as well as the two number variables linked to Month and Year.
In display mode, the Month Picker displays a month and year on the page, with a drop-down for selecting a different month and year.
The Month Picker Component
The Month Picker has two dates: Start Date/Time and End Date/Time, and two numbers: Month and Year.
| Start Date/Time: | The first day of the selected month/year, at 12:00 AM.
This is preconfigured to use the page default variable, startTime. |
| End Date/Time: | The first day of month after the selected month/year, at 12:00 AM.
This is preconfigured to use the page default variable, endTime. |
| Month: | The month portion of Start Date/Time, stored as a numeric variable. For example, if the selected value is February 2016, selectedMonth = 2. |
| Year: | The year portion of Start Date/Time, stored as a numeric variable. For example, if the selected year is February 2016, selectedYear = 2016. |
| Style: | The style you want to apply to the component. If you are a Style Administrator, you can create a new Month Picker style. |
Keep the preconfigured variables in the Month Picker if you want to simplify your work.
Tutorial: Month 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 Month Picker component that uses the page default values for startTime and endTime.
We'll also add two text labels to show the month picker's Year and Month numbers.
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 - Month 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 - Month Picker, and keep the default Workspace, My Workspace.
3. Click Save.
Step 3. Add a Month Picker
1. Drag a Month Picker component onto top right of the Precision Layout, as shown. The Month Picker is in the Time 
group.
2. Click on the Month 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 how they change when you select a new month/year from the month picker.
Step 4. Add Text Labels
In this step we're going to add text labels to show selectedMonth and selectedYear, set by the Month Picker's respective Month and Year properties.
1. Drag a Text Label onto the top left of the page. In the text label's Content type Month: then click Add Data and add the Month Picker's Month variable, selectedMonth, with a Normal format.
2. Drag another Text Label onto the top left of the page, below the first one. In the text label's Content type Year: then click Add Data and add the Month Picker's Year variable, selectedYear, with a Normal format.
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 June 2015 from the Month Picker.
Note how the Start Time and End Time text labels update, as well as the tag values using startTime and endTime, respectively. The Month and Year text labels also update to show the numerical variables, selectedMonth and selectedYear.
The month picker selection updates variables, as shown on the page.